Events in Blazor Accumulation Chart Component

17 Nov 202315 minutes to read

In this section, the list of events of Accumulation Chart component is provided which will be triggered for appropriate accumulation chart actions.

The events should be provided to the Accumulation Chart using AccumulationChartEvents component.

NOTE

From v18.4.*, a few additional following events are added to the Accumulation Chart component.

Event Name
OnDataLabelRender
OnLegendItemRender
OnPointRender

NOTE

From v18.4.*, some event names are different from the previous releases. The following are the event name changes from v18.3.* to v18.4.*

Event Name(v18.3.*)	Event Name(v18.4.*)
AfterExport	OnExportComplete
OnPrint	OnPrintComplete
Resized	SizeChanged

NOTE

From v18.4.*, the following previous release events are removed from the Accumulation Chart component.

Event Name
OnChartMouseClick
OnChartMouseDown
OnChartMouseLeave
OnChartMouseMove
OnChartMouseUp
PointMoved

OnDataLabelRender

OnDataLabelRender event triggers, before datalabel for series is rendered.

Arguments

The following properties are available in the AccumulationTextRenderEventArgs.

• Color – Specifies the color for the data label text.
• Border – Specifies the color and the width of the data label border.
• Font – Specifies the font information of the data label.
• Text – Specifies the text to be displayed in the data label.

@using Syncfusion.Blazor.Charts

<SfAccumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartEvents OnDataLabelRender="DataLabelRenderEvent"></AccumulationChartEvents>

    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            <AccumulationDataLabelSettings Visible="true"></AccumulationDataLabelSettings>
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };

    public void DataLabelRenderEvent(AccumulationTextRenderEventArgs args)
    {
        // Here, you can customize your code.
    }
}

OnLegendItemRender

OnLegendItemRender event triggers, before legend getting rendered.

Arguments

The following properties are available in the AccumulationLegendRenderEventArgs.

• Fill – Specifies the fill color of the legend item’s icon.
• Shape – Specifies the shape of the legend item’s icon.
• Text – Specifies the text to be displayed in the legend item.

@using Syncfusion.Blazor.Charts

<SfAccumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartEvents OnLegendItemRender="LegendRenderEvent"></AccumulationChartEvents>

    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                 Name="Browser">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>

    <AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>
</SfAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };

    public void LegendRenderEvent(AccumulationLegendRenderEventArgs args)
    {
        // Here, you can customize your code.
    }
}

OnPointRender

OnPointRender event triggers before each point for the accumulation chart is rendered.

Arguments

The following properties are available in the AccumulationPointRenderEventArgs.

• Border – Specifies the color and the width of the point border.
• Fill – Specifies the fill color of the point.

@using Syncfusion.Blazor.Charts

<SfAccumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartEvents OnPointRender="PointRenderEvent"></AccumulationChartEvents>

    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };

    public void PointRenderEvent(AccumulationPointRenderEventArgs args)
    {
        // Here, you can customize your code.
    }
}

OnExportComplete

OnExportComplete event triggers after exporting the accumulation chart.

Arguments

The following field is available in the ExportEventArgs.

• DataUrl – Specifies the DataUrl of the exported file.

@using Syncfusion.Blazor.Charts

<button @onclick="Export" class="btn-success">Export</button>
<SfAccumulationChart Title="Mobile Browser Statistics" @ref="AccChart">
    <AccumulationChartEvents OnExportComplete="ExportCompleteEvent"></AccumulationChartEvents>

    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

@code{
    SfAccumulationChart AccChart;
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };

    public void Export()
    {
        AccChart.Export(ExportType.JPEG,"Charts");
    }

    public void ExportCompleteEvent(ExportEventArgs args)
    {
        // Here, you can customize your code.
    }
}

OnPrintComplete

OnPrintComplete event triggers after printing the accumulation chart.

@using Syncfusion.Blazor.Charts

<button @onclick="Print" class="btn-success">Print</button>
<SfAccumulationChart Title="Mobile Browser Statistics" @ref="AccChart">
    <AccumulationChartEvents OnPrintComplete="PrintCompleteEvent"></AccumulationChartEvents>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

@code{
    SfAccumulationChart AccChart;
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };

    public void Print()
    {
        AccChart.Print();
    }

    public void PrintCompleteEvent()
    {
        // Here, you can customize your code.
    }
}

SizeChanged

SizeChanged event is triggered when the accumulation chart is resized.

Arguments

The following fields are available in the AccumulationResizeEventArgs.

• Chart – Specifies the current accumulation chart instance.
• CurrentSize – Specifies the current size of the accumulation chart.
• PreviousSize – Specifies the previous size of the accumulation chart.

@using Syncfusion.Blazor.Charts

<SfAccumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartEvents SizeChanged="SizeChangedEvent"></AccumulationChartEvents>

    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };

    public void SizeChangedEvent(AccumulationResizeEventArgs args)
    {
        // Here, you can customize your code.
    }
}

Loaded

Loaded event triggers after accumulation chart is loaded.

@using Syncfusion.Blazor.Charts

<SfAccumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartEvents Loaded="@LoadHandler"></AccumulationChartEvents>

    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };

    public void LoadHandler(AccumulationLoadedEventArgs args)
    {
        // Here, you can customize your code.
    }
}

OnPointClick

OnPointClick event triggers on point click.

Arguments

The following fields are available in the AccumulationPointEventArgs.

• PageX – Specifies the current window page x location.
• PageY – Specifies the current window page y location.
• Point – Specifies the current point which is clicked.
• PointIndex – Specifies the index of the current point.
• SeriesIndex – Specifies the current series index.
• X – Specifies the x coordinate of the current mouse click.
• Y – Specifies the y coordinate of the current mouse click.

@using Syncfusion.Blazor.Charts

<SfAccumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartEvents OnPointClick="PointClick"></AccumulationChartEvents>

    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };

    public void PointClick(AccumulationPointEventArgs args)
    {
        // Here, you can customize your code.
    }
}

TooltipRender

TooltipRender event triggers before the tooltip for series is rendered.

Arguments

The following property is available in the TooltipRenderEventArgs.

• HeaderText – Specifies the header text for the tooltip.
• Text – Specifies the text for the tooltip.

@using Syncfusion.Blazor.Charts

<SfAccumulationChart Title="Mobile Browser Statistics">
    <AccumulationChartEvents TooltipRender="TooltipRenderEvent"></AccumulationChartEvents>

    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>

    <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
</SfAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };

    public void TooltipRenderEvent(TooltipRenderEventArgs args)
    {
        // Here, you can customize your code.
    }
}