[Chartjs]-Sending data to ChartJsLineChart in ChartJs.Blazor

by

1👍

You can use any reference type supported by ChartJs.Blazor to add data to the chart. I identified 3 main categories of types of data that are used with line charts.
1) If you simply want to use a (double/int) value type along both x-axis and y-axis then you can use the ChartJs.Blazor.ChartJS.Common.Point data type. For e.g.

_WeightDataSet = new LineDataset<ChartJs.Blazor.ChartJS.Common.Point>
        {
            BackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.White),
            BorderColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Red),
            Label = "Weight per Day",
            Fill = false,
            BorderWidth = 2,
            PointRadius = 2,
            PointBorderWidth = 2,
            SteppedLine = SteppedLine.False,
            Hidden = false
        };

You might also have to configure the xAxes in the config to a LinearCartesianAxis object for this to work.
2) If you want the x-axis to have a time value whereas the y-axis to have a double value then you need to use TimeTuple as mentioned in the example quoted by you. You might also have to configure the xAxes object in the config to be a TimeAxis object.
3) If you want double (or int) value to be plotted along y-axis against string labels on the x-axis then you need to use Wrappers provided in the ChartJs.Blazor.ChartJS.Common.Wrappers namespace and configure the xAxes to a CategoryAxis object in the config. An example of this is provided in the code hosted on https://github.com/LearnC0de/BlazorAppLineChart/blob/master/BlazorAppLineChart/BlazorAppLineChart/Pages/LineChart.razor

Leave a comment