Skip to content

Generated script for a pie chart sets root type to "bar" #105

@yAnn1ck-B

Description

@yAnn1ck-B

Using version 3.11, check code below, using PieDataSet, converted script shows "type: bar"

//create dom id
id = "chart" + Guid.NewGuid().ToString("N") + DateTime.Now.Ticks.ToString();

//initialize chart
chart = new Chart()
    {
        Data = new Data(),
        Options = new Options
        {
            Plugins = new Plugins()
            {
                Legend = new Legend()
                {
                    Display = true,
                    Position = "left"
                }
            },
            Responsive = true,
            //setting this with a pie chart does not look good as it reduces the size of the pie chart a lot
            // MaintainAspectRatio = false // Disable the aspect ratio
        }
    };

//create colors
colors = ColorUtils.GetColorsByRange(AI_Component_Data.SingleChartData.Values.Count());

var chartColors = new List<ChartColor>();
var backgroundChartColors = new List<ChartColor>();
foreach (var rgba in colors)
{
    backgroundChartColors.Add(ChartColor.FromRgba(rgba.R, rgba.G, rgba.B, (float)rgba.A / 510f));
    chartColors.Add(ChartColor.FromRgba(rgba.R, rgba.G, rgba.B, (float)rgba.A / 255f));
}

//set labels
chart.Data.Labels = AI_Component_Data.SingleChartData.Keys.ToList();

//create single data set
var dataset = new PieDataset()
    {
        Data = AI_Component_Data.SingleChartData.Values,
        BackgroundColor = backgroundChartColors,
        HoverBackgroundColor = chartColors,
    };
chart.Data.Datasets = new List<Dataset>() { dataset };

var script = chart.CreateChartCode(id);

converts to this:

var chart30f335053bf44f33b54e1910b1eec566638684694766181892Element = document.getElementById("chart30f335053bf44f33b54e1910b1eec566638684694766181892");
var chart30f335053bf44f33b54e1910b1eec566638684694766181892 = new Chart(chart30f335053bf44f33b54e1910b1eec566638684694766181892Element, {"type":"**bar**","data":{"datasets":[{"type":"pie","backgroundColor":["rgba(56, 116, 255, 0.250980406999588)","rgba(128, 56, 116, 0.250980406999588)","rgba(0, 56, 158, 0.3764705955982208)"],"data":[120.5,89.3,15.7],"hoverBackgroundColor":["rgba(56, 116, 255, 0.501960813999176)","rgba(128, 56, 116, 0.501960813999176)","rgba(0, 56, 158, 0.7529411911964417)"]}],"labels":["Category A","Category B","Category C"]},"options":{"responsive":true,"plugins":{"legend":{"display":true,"position":"left"}}}}
);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions