Chartjs-Chart.js – Black bar colors in mobile devices

by

1👍

✅

Couple things:

1) You mentioned that some of the labels are missing on the xAxis of the chart. In ChartJS there is an option to set autoSkip to false by default it’s true I believe which will allow all labels on the xAxis to not be skipped.

2) As for the colors not showing up correctly on mobile, can you try to get rid of the transparency and see if it works? I ran into the same problem and I got rid of the transparency values and it worked for me. Also, you have responsive set to false try setting that to true and see if it fixes the color issue.

var config = {
    type: 'bar',
    data: {
        datasets: [{
            data: ['13', '10', '112', '158', '37'],
            backgroundColor: ['rgb(43, 177, 0, 1)', 'rgb(174,177, 0, 1)', 'rgb(255,165, 0, 1)', 'rgb(255,47, 0, 1)', 'rgb(255,0, 0, 1)']
        }],
        labels: ['Até R$ 50', 'R$ 50 - R$ 100', 'R$ 100 - R$ 250', 'R$ 250 - R$ 500', 'Acima de R$ 500']
    },
    options: {
        responsive: false,
        legend: {
            display: false
        },
        xAxis: [{
          ticks: {
              autoSkip: false,
           }
        }]
    }
};

Leave a comment