mattosaurus / ChartJSCore

Implementation of Chart.js for use with .NET Core.
GNU General Public License v3.0
116 stars 34 forks source link

Error in CreateChartCode method #67

Closed LaplancheMaxime closed 2 years ago

LaplancheMaxime commented 3 years ago

Hi !

I think we have a little problem with the objects compared to the last version of Chart.JS. Some configuration items should be under options.plugins. while the method places them under options. directly.

Exemple: C#

                        chart = new Chart
                        {
                            Type = Enums.ChartType.Bar,
                            Data = new Data
                            {
                                Labels = new List<string> { "10/05", "11/05", "12/05", "13/05", "14/05", "15/05", "16/05" },
                                Datasets = new List<Dataset>()
                                {
                                    new BarDataset
                                    {
                                        Label = "First Label",
                                        Data = new List<double?> {5,0.7,3,7,1,1,5},
                                        BackgroundColor = new List<ChartColor>{ ChartColor.FromHexString("#3366cc") },
                                        BorderColor = new List<ChartColor> { ChartColor.FromHexString("#3366cc") },
                                        BorderWidth = new List<int> { 1 },
                                    },
                                    new BarDataset
                                    {
                                        Label = "Second label",
                                        Data = new List<double?> {10,0,7,0,7,7,2,4},
                                        BackgroundColor = new List<ChartColor> { ChartColor.FromHexString("#dc3912") },
                                        BorderColor = new List<ChartColor> { ChartColor.FromHexString("#dc3912") },
                                        BorderWidth = new List<int> { 1 },
                                    },
                                    new BarDataset
                                    {
                                        Label = "Third label",
                                        Data = new List<double?> {0,0,0,0,0,10,2,2},
                                        BackgroundColor = new List<ChartColor> { ChartColor.FromHexString("#ff9900") },
                                        BorderColor = new List<ChartColor> { ChartColor.FromHexString("#ff9900") },
                                        BorderWidth = new List<int> { 1 },
                                    },
                                },
                            },
                            Options = new Options() // not work for the moment
                            {
                                Title = new Title() { Text = "My Title not work...", Display = true},
                                Legend = new Legend() { Position = "right", Display = true },
                                PluginDynamic = new Dictionary<string, object>
                                {
                                    { "plugins" , new { Title = new { Text = "My working title", Display = true } } } // THIS WORK
                                }
                            }
                        }

Rendering of the CreateChartCode method :

var MyChart = document.getElementById("MyChart");
var MyChart = new Chart(MyChartElement, {"type":"bar","data":{"datasets":[{"type":"bar","backgroundColor":"rgba(51, 102, 204, 1)","borderColor":"rgba(51, 102, 204, 1)","borderWidth":1,"data":[5.0,0.7,3.0,7.0,1.0,1.0,5.0],"label":"First Label"},{"type":"bar","backgroundColor":"rgba(220, 57, 18, 1)","borderColor":"rgba(220, 57, 18, 1)","borderWidth":1,"data":[10.0,0.0,7.0,0.0,7.0,7.0,2.0,4.0],"label":"Second label"},{"type":"bar","backgroundColor":"rgba(255, 153, 0, 1)","borderColor":"rgba(255, 153, 0, 1)","borderWidth":1,"data":[0.0,0.0,0.0,0.0,0.0,10.0,2.0,2.0],"label":"Third Label"}],"labels":["10/05","11/05","12/05","13/05","14/05","15/05","16/05"]},"options":{"title":{"display":true,"text":"My Title not work..."},"legend":{"display":true,"position":"right"},"plugins":{"title":{"text":"My Working title","display":true}}}}
);

Do you have a solution to use the objects directly?

Thanks a lot

mattosaurus commented 3 years ago

Hi, are you using this with a specific plugin? If so are you able to send me the the documentation for it.

If Chart.js has moved all plugin configuration options then I might need to move the Plugins object onto the Options object but if it's just this particular plugin then the approach your currently using is probably correct.

LaplancheMaxime commented 3 years ago

Hi, no I don't use a specific plugin

Look here : https://www.chartjs.org/docs/latest/configuration/title.html // https://www.chartjs.org/docs/latest/configuration/legend.html

options.plugins.legend options.plugins.title

I have the impression that a lot of objects are passed under plugins. Thank you very much

mattosaurus commented 3 years ago

Ah yes, looks like a lot of options moved in v3 of Chart.js. I'll look at updating this reflect that when I get a chance.

mattosaurus commented 2 years ago

I'm going to assume this is fixed with the new v3 release, please re-open and provide example code if that's not actually the case.