Chartjs-Line chart with combination of fill and line

0πŸ‘

βœ…

enter image description here
I guess, lightening the fill does the trick. I don’t want to lighten the fill, but it’s the only way I can think of

  config = {
type: 'line',
data: {
  labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
  datasets: [
    {
      label: 'Group1',
      data: [-800, -1100, -1150, -1250, -1560, -1460, -1890],
      backgroundColor: 'rgba(255, 99, 132, 0.3)',
      borderColor: 'rgba(255,99,132, 0.3)',
      borderWidth: 1
    },
    {
      label: 'Group2',
      data: [-1300, -1560, -1380, -2450, -2560, -1860, -3890],
      backgroundColor: 'rgba(54, 162, 235, 0.3)',
      borderColor: 'rgba(54, 162, 235, 0.3)',
      borderWidth: 1
    },
    {
      label: 'Group3',
      fill: false,
      data: [-1100, -1460, -1280, -1650, -2060, -1560, -2890],
      backgroundColor: 'rgb(255, 206, 86)',
      borderColor: 'rgb(255, 206, 86)',
      borderWidth: 4
    }
  ]
},
options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

};

Leave a comment