Simple line chart with string labels (categories)

[schuttea]

Hello i Would like to view a simple chart like: https://www.chartjs.org/samples/latest/charts/line/basic.html

I have a Server Side Blazor app with a SimpleLineChart component. Some how i cat get this working with simple integer or double values With a category of a few months and some values. I think my object is ok but the values are not plotted.

Files:

Code:

@page "/simplelinechart"

@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.ChartJS.Common
@using ChartJs.Blazor.ChartJS.Common.Properties
@using ChartJs.Blazor.ChartJS.Common.Enums
@using ChartJs.Blazor.ChartJS.LineChart
@using ChartJs.Blazor.ChartJS.Common.Axes
@using ChartJs.Blazor.ChartJS.Common.Axes.Ticks
@using ChartJs.Blazor.ChartJS.Common.Handlers
@using ChartJs.Blazor.Util
@using ChartJs.Blazor.ChartJS.Common.Time
@using ChartJs.Blazor.ChartJS.Common.Wrappers

<ChartJsLineChart @ref="_lineChartJs" Config="@_lineConfig" Width="600" Height="300" />

@code {
    //trying to configure simple chart like : https://www.chartjs.org/samples/latest/charts/line/basic.html
    LineConfig _lineConfig;
    ChartJsLineChart _lineChartJs;

    protected override void OnInitialized()
    {

        _lineConfig = new LineConfig
        {
            Options = new LineOptions
            {
                Responsive = true,
                Title = new OptionsTitle
                {
                    Display = false,
                    Text = "Line Chart"
                },
                Tooltips = new Tooltips
                {
                    Mode = InteractionMode.Index,
                    Intersect = false
                },
                Hover = new LineOptionsHover
                {
                    Intersect = true,
                    Mode = InteractionMode.Index
                },
                Scales = new Scales
                {
                    xAxes = new List<CartesianAxis>
                    {
                        new LinearCartesianAxis
                        {
                            ScaleLabel = new ScaleLabel
                            {
                                LabelString = "Month"
                            },
                            Display =     AxisDisplay.True
                        }
                    },
                    yAxes = new List<CartesianAxis>
                    {
                        new LinearCartesianAxis
                        {
                            ScaleLabel = new ScaleLabel
                            {
                                LabelString = "Value"
                            },
                            Display =     AxisDisplay.True
                        }
                    }
                },

            }

        };

        _lineConfig.Data.Labels = new List<string>();
        _lineConfig.Data.Labels.AddRange(new[] { "January", "February", "March", "April", "May", "June", "July" });

        LineDataset<DoubleWrapper> _lineset = new LineDataset<DoubleWrapper>();

        _lineset.Label = "Earnings";
        _lineset.BackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Blue);
        _lineset.BorderColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Blue);
        _lineset.Fill = false;

        _lineset.AddRange(new double[] { 100, 500, 150, 1000, 2000, 1500 }.Wrap());
        _lineConfig.Data.Datasets.Add(_lineset);

    }
}

[Joelius300]

Thanks for contacting us!
You're trying to display labels/strings on the x-axis but you're using a LinearCartesianAxis. The linear cartesian axis is used when there are numeric values on both axes. In order to display strings on an axis, you need to use a CategoryAxis (see docs).

Replace your LinearCartesianAxis in the xAxes with a CategoryAxis and it should work :)

If not, please reopen the issue.