mariusmuntean / ChartJs.Blazor

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

PieCharts and DonutCharts do not respect the Labels data element #5

Closed ghofman2 closed 4 years ago

ghofman2 commented 5 years ago

For reference see the example pie charts and donut charts at https://www.iheartblazor.com

using the config:

var pieChartConfig = new PieChartConfig
            {
                CanvasId = "sample",
                Options = new PieChartOptions
                {
                    Text = "Sample Pie",
                    Display = true,
                    Responsive = true,
                    Animation = new DoughnutAnimation { AnimateRotate = true, AnimateScale = true }
                },
                Data = new PieChartData
                {
                    Labels = new List<string> { "first", "second" },
                    Datasets = new List<PieChartDataset>
                    {
                        new PieChartDataset
                        {
                            Label = "Amount",
                            BackgroundColor = "#00ACAC", "#21409A" ,
                            Data = new List<int> { 1, 2 },
                            BorderWidth = 2,
                            HoverBackgroundColor = new [] { "#BEBEBE" },
                            HoverBorderColor = new [] { "#A9A9A9" },
                            HoverBorderWidth = new[] {1},
                            BorderColor = "#ffffff",
                        }
                    }
                }
            };

I would expect to see labels at the top of the chart for "first" and "second", instead there is one label that reads "Amount" and when clicked will hide the chart altogether. The official javascript chart js library seems to behave as I've mentioned, see here. Is there a way to achieve this with ChartJs.Blazor ?

For clarity, I'd expect the examples posted at https://www.iheartblazor.com to have 1 label at the top of the chart for each color listed on the chart. Clicking on the label would hide that portion of the chart. Instead, what's there (and what I'm experiencing) is that there is only 1 label at the top of the chart and clicking it completely hides/shows the chart.

SeppPenner commented 5 years ago

If I was you, I would take a look at https://github.com/Joelius300/ChartJSBlazor. This project is maintained at least.

Joelius300 commented 4 years ago

This was fixed by https://github.com/mariusmuntean/ChartJs.Blazor/commit/b5d93dde79047c640d38ec32e580eec3db8a1958 and covered in https://github.com/Joelius300/ChartJSBlazor/issues/65.