Chartjs-Chart.js: Fill background between two lines

1👍

Very hackish way but it gives the expected result :D!

Fiddle -> http://jsfiddle.net/Lzo5g01n/28/

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Yellow", "Blue", "Green", "Orange", "Pink"],
    datasets: [{      
      fill: false,
      data: [0, 10, , 10, 0],
      backgroundColor: 'black',
      borderColor: 'black',
      borderWidth: 1
    }, {      
      data: [10, 10, 10, 10, 10],
      fill: true,
      backgroundColor: 'white',
      borderColor: 'black',
      borderWidth: 1
    }, {      
      data: [, 10, 18, 10, ],
      backgroundColor: 'black',
      borderColor: 'black',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        display: false,
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        display: false
      }]
    },
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    elements: {
      point: {
        radius: 0
      }
    }
  }
});

Leave a comment