[bug] Color problem in stacked line chart on Chrome

On different stacked line chart Firefox display the correct color and Chrome don’t…

Expected Behavior (Firefox)

Version 54.0 on ubuntu

firefox

Current Behavior

Version 59.0.3071.109 also on ubuntu
chrome

In the tooltip the color are correctly displayed but neither on the graph (incorrect transparency) nor in the legend (grey).

Code used

var ctx = document.getElementById("EvolutionBreackdownsChart");
var EvolutionBreackdownsChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["April", "May", "June", "July", "August", "September", "October", "November", "December", "January", "February", "March", "April"],
      datasets: [{
        label:'O',
        data: [20, 21, 19, 17, 22, 25, 23, 18, 15, 16, 17, 19, 20],
        fill: 'origin',
        backgroundColor: 'rgba(255, 148, 31, 0.2)',
        borderWidth:0.1,
        borderColor: 'rgba(255, 148, 31, 0.55)',
        pointRadius:3,
        pointBackgroundColor: 'rgba(255, 148, 31, 0.2)',
        pointBorderColor: 'rgba(255, 148, 31, 0.55)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      }, {
        label:'A',
        data: [30, 28, 29, 32, 32, 31, 25, 29, 29, 30, 31, 28, 29],
        fill: '-1',
        backgroundColor:'rgb(255, 148, 31, 0.35)',
        borderWidth:0.1,
        borderColor: 'rgb(255, 148, 31, 0.75)',
        pointRadius:3,
        pointBackgroundColor: 'rgb(255, 148, 31, 0.35)',
        pointBorderColor: 'rgb(255, 148, 31, 0.75)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      }, {
        label:'M',
        data: [10, 12, 13, 10, 11, 12, 11, 10, 12, 11, 11, 10, 9],
        fill: '-1',
        backgroundColor:'rgb(255, 148, 31, 0.5)',
        borderWidth:0.1,
        borderColor: 'rgb(255, 148, 31, 0.9)',
        pointRadius:3,
        pointBackgroundColor: 'rgb(255, 148, 31, 0.5)',
        pointBorderColor: 'rgb(255, 148, 31, 0.9)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      }, {
        label:'R',
        data: [28, 29, 32, 31, 27, 25, 31, 33, 28, 33, 31, 30, 32],
        fill: '-1',
        backgroundColor:'rgba(255, 148, 31, 0.60)',
        borderWidth:0.1,
        borderColor: 'rgba(255, 148, 31, 1)',
        pointRadius:3,
        pointBackgroundColor: 'rgba(255, 148, 31, 0.60)',
        pointBorderColor: 'rgba(255, 148, 31, 1)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      }, {
        label:'B',
        data: [12, 10, 7, 10, 8, 7, 10, 10, 16, 10, 10, 13, 10],
        fill: '-1',
        backgroundColor:'rgba(3, 169, 244, 0.25)',
        borderWidth:0.1,
        borderColor: 'rgba(3, 169, 244, 1)',
        pointRadius:3,
        pointBackgroundColor: 'rgba(3, 169, 244, 0.25)',
        pointBorderColor:  'rgba(3, 169, 244, 1)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      },],
    },
    options: {
      scales: {
          yAxes: [{
            stacked:true,
            gridLines: {
              display:false,
            },
            ticks: {
              beginAtZero:true,
              fontColor:'#78909c',
              fontFamily:"'Source Sans Pro', sans-serif",
              fontSize:10,
            },
          }],
          xAxes: [{
            ticks:{
              fontColor:'#78909c',
              fontFamily:"'Source Sans Pro', sans-serif",
              fontSize:10,
              maxTicksLimit: 15,
              callback: function(tick) {
                  var characterLimit = 4;
                  if (tick.length >= characterLimit) {
                      return tick.slice(0, tick.length).substring(0, characterLimit - 1).trim();;
                  }
                  return tick;
              },
            },
          }]
      },
      legend: {
        position:"right",
        reverse:true,
      },
      tooltips: {
        backgroundColor:'rgba(3, 169, 244, 0.75)',
        bodyFontFamily:"'Source Sans Pro', sans-serif",
        titleFontStyle:"normal",
        bodyFontFamily:"'Source Sans Pro', sans-serif",
        displayColors: true,
        cornerRadius:0,
        intersect:false,
        mode: 'x-axis',
        callbacks: {
            title: function(tooltipItem){
                return this._data.labels[tooltipItem[0].index];
              }
          },
        itemSort: function(a, b) {
        return b.datasetIndex - a.datasetIndex
      },
      },
    }
});

Author: Fantashit

1 thought on “[bug] Color problem in stacked line chart on Chrome

Comments are closed.