Stacked bar?

[AlphaComposite]

What's the syntax for creating a stacked bar? Looks like this in Javascript:

options: { scales: { yAxes: [{ stacked: true, ticks: { beginAtZero: true } }], xAxes: [{ stacked: true, ticks: { beginAtZero: true } }]

}

Been digging around but can't quite figure this one out.

[mattosaurus]

Stacked is a property on the Scale object, going off of the bar chart test it should be this.

chart.Data = data;

var options = new Options
{
    Scales = new Scales()
};

var scales = new Scales
{
    YAxes = new List<Scale>
    {
        new CartesianScale
        {
            Ticks = new CartesianLinearTick
            {
                BeginAtZero = true
            }
        }
    },
    XAxes = new List<Scale>
    {
        new BarScale
        {
            BarPercentage = 0.5,
            BarThickness = 6,
            MaxBarThickness = 8,
            MinBarLength = 2,
            GridLines = new GridLine()
            {
                OffsetGridLines = true
            },
            Stacked = true
        }
    }
};

options.Scales = scales;

chart.Options = options;

If that doesn't work let me know.

[AlphaComposite]

That appears to be the ticket. Thanks.

[AlphaComposite]

Appears to be a problem with this. The stacked bar months with only two values display correctly, but the stacked bar in the second month has three values and doesn't display properly. Is there another ChartJs option that resolves this?

Using your example from before, here's the Javascript that ChartJSCore generates:

var BarChartElement = document.getElementById("BarChart"); var BarChart = new Chart(BarChartElement, { "type": "bar", "data": { "datasets": [{ "type": "bar", "data": [0.0, 3749033.0, 0.0, 0.0, 0.0, 0.0], "label": "2019-S6" }, { "type": "bar", "data": [883891.0, 2596397.0, 1487038.0, 1092108.0, 373971.0, 0.0], "label": "2017-F2 GBP" }, { "type": "bar", "data": [1500440.0, 1107860.0, 1503732.0, 1317341.0, 492211.0, 0.0], "label": "2017-F2 USD" }, { "type": "bar", "data": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "label": "2019-F1" }], "labels": ["April", "May", "June", "July", "August", "September"] }, "options": { "scales": { "xAxes": [{ "barPercentage": 0.5, "barThickness": 6.0, "maxBarThickness": 8.0, "minBarLength": 2.0, "gridLines": { "offsetGridLines": true }, "stacked": true }], "yAxes": [{ "ticks": { "beginAtZero": true } }] } } });

[mattosaurus]

Sorry, I'm not an expert on how the stacked bar charts work in Chart.js, you might have better luck raising an issue on their GitHub page or Stack Overflow. If you can get it to work in Chart.js but not using my ChartJsCore library then that's probably a bug and I'll look into it.