[Chartjs]-How can I change ChartJS line color based on the value?

by

1👍

✅

Solution # 1

The pointBorderColor and pointBackgroundColor work perfectly when you only want to color the markers of the values. To do this, you need to predefine an array of colors from the array of values.

You can color the borderColor or backgroundColor of a line chart on a segment-by-segment basis. For this, you have the option of using segment.borderColor or segment.backgroundColor (when fill: true is set). These settings invoke a function to which you pass the current opening and closing values of the "segment". I have written an example that includes these as well, although I had to define the 0 value here to ensure that the segment consists only of positive or negative numbers… anyway, here is the example:

Chart.js Github Issue #1493

const ctx = document.getElementById("myChart").getContext("2d")
const data = [10, 20, 0, -10, -20, 0, 5]
const colors = data.map((value) => value < 0 ? 'red' : 'green')

const chart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
    datasets: [{
      label: "Sample Dataset",
      data: data,
      fill: true, // set true for "backgroundColor" using
      segment: {
        borderColor: (part) => {
          const prevValue = part.p0.parsed.y // start value
          const nextValue = part.p1.parsed.y // end value
          return prevValue < 0 || nextValue < 0 ? "red" : "green" // return with a color by rule
        },
        backgroundColor: (part) => {
          const prevValue = part.p0.parsed.y // start value
          const nextValue = part.p1.parsed.y // end value
          return prevValue < 0 || nextValue < 0 ? "red" : "green" // return with a color by rule
        },
      },
      pointBorderColor: colors, // with array of colors
      pointBackgroundColor: colors, // with array of colors
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        ticks: {
          beginAtZero: true
        }
      }
    }
  },
})
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="myChart"></canvas>

Solution # 2

To achieve gradient fill in Chart.js 3.x or higher versions, you can use the package called chartjs-plugin-gradient available at. I have provided a simple example code below:

const ctx = document.getElementById("myChart").getContext("2d")
const gradient = window['chartjs-plugin-gradient'] // call CDN "chartjs-plugin-gradient"

const chart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May"],
    datasets: [{
      label: "Sample Dataset",
      data: [0, 1, 4, 16, 64],
      fill: true, // set true for "backgroundColor" using
      gradient: {
        // Can set gradient background (need "fill: true")
        backgroundColor: {
          axis: 'y', // 'x' or 'y'
          colors: {
            // from value: color hex
            0: 'red',
            4: 'yellow',
            20: 'green'
          }
        },
        // Can set gradient line
        borderColor: {
          axis: 'y', // 'x' or 'y'
          colors: {
            // from value: color hex
            0: 'red',
            4: 'yellow',
            20: 'green'
          }
        }
      }
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        ticks: {
          beginAtZero: true
        }
      }
    }
  },
  plugins: [gradient] // using "chartjs-plugin-gradient"
})
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-gradient#.js"></script>

<canvas id="myChart"></canvas>

Leave a comment