Search results

Datalabel Template in Blazor Chart component

You can bind text and interior information for a point from dataSource other than x and y value.

To access the aggregate values inside the Template, you can use the implicit named parameter context. You can type cast the context as IChartTemplate to get aggregate values inside template.

You can also change this implicit parameter name using Context attribute.

For example, you can access the data label template using context as follows.

        <ChartDataLabel Visible="true">
                    <Template>
                        @{
                            var data = context as IChartTemplate;
                            <table>
                                <tr><td align="center"> @data.Y</td></tr>
                            </table>
                        }
                    </Template>
         </ChartDataLabel>
  
data-label-template.razor
@using Syncfusion.Blazor.Charts


<SfChart Title="Inflation - Consumer Price" ModelType="@Model">
    <ChartPrimaryXAxis IntervalType="IntervalType.Years" LabelFormat="y" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@ConsumerReports" XName="XValue" YName="YValue" Type="ChartSeriesType.Column">
            <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
            <ChartMarker Visible="true">
                <ChartDataLabel Visible="true">
                    <Template>
                        @{
                            var data = context as IChartTemplate;
                            <table>
                                <tr><td align="center"> @data.Y</td></tr>
                            </table>
                        }
                    </Template>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public IChartTemplate Model = new IChartTemplate();
    public class ChartData
    {
        public DateTime XValue;
        public double YValue;
    }


    public List<ChartData> ConsumerReports = new List<ChartData>
{
            new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 21 },
            new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 24 },
            new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 36 },
            new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
            new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
            new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
            new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
        };
}
<style>
    td {
        width: 30px;
        border: 2px solid red;
        background-color: yellow;
    }
</style>