CODEWITHSUNDEEP
javascriptchart.js
Adriano Castro
Adriano Castro

Reputation: 1481

Chart.js - Black bar colors in mobile devices

I have a bar chart made with Chart.js which is working perfectly in my website by doing this:

<canvas id='chart-area'></canvas>

<script type='text/javascript'>
    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
            }
        }
    };

    jQuery(document).ready(function() {
        var ctx = jQuery('#chart-area')[0].getContext('2d');
        window.myPie = new Chart(ctx, config);
    });
</script>

enter image description here

However, for mobile devices, the bar colors are all black and some of the legends are missing:

enter image description here

Still, when I click on any bar in a mobile device, the bars disappear.

Any advise on my code that could be causing this behavior?

Upvotes: 0

Views: 1013

Answers (1)

InoCuro
InoCuro

Reputation: 135

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,
           }
        }]
    }
};

Upvotes: 1

Related Questions