mariusmuntean / ChartJs.Blazor

Brings Chart.js charts to Blazor
https://www.iheartblazor.com/
MIT License
676 stars 151 forks source link

Line Chart Only Displaying Two values #194

Closed Exeton closed 2 years ago

Exeton commented 3 years ago

Describe the bug

Line chart is only displaying two values

Which Blazor project type is your bug related to?

Which charts does this bug apply to?

Line Charts

To Reproduce

Steps to reproduce the behavior:

  1. Using this version of ChartJSBlazor '2.0.2'.
  2. Run this code

@code { private LineConfig _config = new LineConfig { Options = new LineOptions { Responsive = true, ShowLines = true, Title = new ChartJs.Blazor.Common.OptionsTitle { Display = true, Text = "Price vs Time" }

    }
};

protected override async Task OnInitializedAsync()
{
    loaded = true;
    LineDataset<double> dataset = new LineDataset<double>(new double[] { 1, 2, 7, 1, 3 });
    _config.Data.Datasets.Add(dataset);
}

}

  1. Chart will only have 2 points on it. The datapoint 1 and 2.

Expected behavior

Line chart will display a chart with 5 data points on it.

Screenshots

https://imgur.com/a/Z5XYsGB

Additional context / logging

Add any additional context about the problem here.

Code example

Please provide full code examples below where possible to make it easier for the developers to check your issues.
Please also add the working JavaScript equivalent so we can see what you were trying to achieve.

<Chart Config="_config"></Chart>

@code {
    private LineConfig _config = new LineConfig
    {
        Options = new LineOptions
        {
            Responsive = true,
            ShowLines = true,
            Title = new ChartJs.Blazor.Common.OptionsTitle
            {
                Display = true,
                Text = "Price vs Time"
            }

        }
    };

    protected override async Task OnInitializedAsync()
    {
        loaded = true;
        LineDataset<double> dataset = new LineDataset<double>(new double[] { 1, 2, 7, 1, 3 });
        _config.Data.Datasets.Add(dataset);
    }
}

JavaScript example. Just trying to create a basic line chart like: https://www.chartjs.org/docs/latest/charts/line.html

ryanjt commented 2 years ago

I believe it may because you're missing labels. I copied your solution and added labels for each point and was able to see each point from your dataset! Hope this helps 😄

Exeton commented 2 years ago

Thank you!