0

I have line chart with two lines. First line is static, second line builds dynamically. I need to fill area between first and second line if y value of second line above a y value of first line.

I used Charts.js library for chart building

Currently I have next result (Fill between two lines): enter image description here

Expected result: enter image description here

Igor S
  • 951
  • 7
  • 19

1 Answers1

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
      }
    }
  }
});
Kunal Khivensara
  • 1,619
  • 14
  • 21