我的chartjs图表的条形没有背景色

Question

I'm using a bar chart from chart.js. Everything just work fine except for the bars. They don't have a background color, even not the default. I can see the top border of the chart and when I', hovering over the bar I see the tooltip with the value.

This is the code I use:

        var mixedChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['< 30', '30 - 60', '61 - 90', '> 90'],
                datasets: [{
                        label: "sales",
                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
                        borderColor: 'rgba(0,0,0,1)',
                        borderWidth: '0',
                        data: [40, 60, 70, 70]
                    }
                ]
            },
            options: {
                legend: {
                    display: false,
                },
                barStrokeWidth : 10,
                scales: {
                    xAxes: [{
                        stacked: true,
                        gridLines: {
                            display: false ,
                            color: 'rgb(0, 0, 0, 0)'
                        },
                    }],
                    yAxes: [{
                        stacked: true,
                        gridLines: {
                            display: false,
                            color: 'rgb(0, 0, 0, 0)'
                        },
                        ticks: {
                            min: 0,
                            callback: function(value) {
                                return value + ',00'
                            }
                        }
                    }]
                },
                elements: {
                    line: {
                        tension: 0
                    }
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
            }
        });```

An idea how I can solve my problem?

Answer 1

Here is the code example based on previous comments

 var mixedChart = new Chart('chart', { type: 'bar', data: { labels: ['< 30', '30 - 60', '61 - 90', '> 90'], datasets: [{ label: "sales", borderWidth: '0', data: [40, 60, 70, 70], backgroundColor: ["#000000", "#000000", "#000000", "#ff0000", "#0000ff"], }] }, options: { legend: { display: false, }, barStrokeWidth: 10, scales: { xAxes: [{ stacked: true, gridLines: { display: false, color: 'rgb(0, 0, 0, 0)' }, }], yAxes: [{ stacked: true, gridLines: { display: false, color: 'rgb(0, 0, 0, 0)' }, ticks: { min: 0, callback: function(value) { return value + ',00' } } }] }, elements: { line: { tension: 0 } }, tooltips: { mode: 'index', intersect: false }, } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script> <canvas id="chart"></canvas>