0

I'm trying to fill red colour for value less than 0 and green for value greater than 0 for a line chart. The code which I've written is - public lineChartData: ChartConfiguration<'line'>['data'] | undefined; and `

this.lineChartData = {
      labels: this.arrayData.map(x => x.strike),
      datasets: [
        {
          data: this.arrayData.map(y => y.payoff),
          label: "Option Payoff",
          fill: true,
          tension: 0,
          borderColor: 'rgb(54, 162, 235)',
          //backgroundColor: 'rgba(0,0,255,0.9)',
          backgroundColor: this.arrayData.map(x => x.payoff < 0 ? 'rgb(255,0,0)' : 
          'rgb(0,255,0)'),
          spanGaps: 1
        }
      ]
    }

` to set data, but my graph has filled all the data with red colour. I tried debugging it in dom and the background colour property is correctly set to rgb(0,255,0) for all data points having value greater than 0, yet it is not filled..Can someone please explain me where I'm making mistake?

here is the output while debugging where background colour is set to green for +ve values and red for -ve values

Shardul
  • 1
  • 3
  • I don't see any issue in your code. For a more detailed analysis, please add more code as to make it a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). Meanwhile you may try using a function for the `backgroundColor` property like `backgroundColor: b => b.parsed.y < 0 ? 'rgb(255,0,0)' : 'rgb(0,255,0)'` – kikon Feb 05 '23 at 11:17
  • https://stackoverflow.com/questions/36916867/chart-js-line-different-fill-color-for-negative-point – user2057925 Feb 06 '23 at 12:54
  • this worked for me - fill: { target: 'origin', above: 'rgb(0, 255, 0)', // Area will be red above the origin below: 'rgb(255, 0, 0)' // And blue below the origin }, – Shardul Feb 06 '23 at 14:24

0 Answers0