Displaying multiple background color for a dataset

[muskankhedia]

Feature Proposal

I want to set different background colours for a dataset based on a specific condition.

Current implementation:

Expected:

If we can add a condition for background colours as,

if (dataset === 40 {
 return 'blue';
} else {
return 'green';
}

JS Fiddle: https://jsfiddle.net/muskan_khedia/zct270fq/3/

Possible Implementation

No response

[kurkle]

You can assign a function to backgroundColor (and almost any option).

https://www.chartjs.org/docs/latest/samples/scriptable/bar.html

[muskankhedia]

@kurkle I have implemented the options.elements value in the sandbox but it doesn't seem to be working.

https://jsfiddle.net/muskan_khedia/zct270fq/12/

[stockiNail]

@muskankhedia if I may, there are 2 errors in the jsfiddle:

1. You are referring to the Utils that it's not included (see the disclaimer https://www.chartjs.org/docs/latest/samples/utils.html)
2. if you set the options (background and border color) at element level, you should remove them from dataset definitions otherwise they will override the elements ones.

I have changed your sample with the following code and it's working:

const data = {
  labels: ["match1", "match2", "match3", "match4", "match5"],
  datasets: [{
      type: 'line',
      label: "TeamA score",
      data: [50, 50, 50, 50, 50],
      borderDash: [3, 2],
      fill: false
    },
    {
      type: 'bar',
      label: "TeamB score",
      data: [20, 35, 40, 60, 50],
      fill: false,
      //borderWidth: 1
    }
  ]
};

function colorize(opaque) {
  return (ctx) => {
    const v = ctx.parsed.y;
    const c = v < 40 ? '#D60000': '#44DE28';

    return c;
  };
}

const options = {
  title: {
    display: true,
    position: "top",
    text: "Line Graph",
    fontSize: 18,
    fontColor: "#111"
  },
  elements: {
      bar: {
        backgroundColor: colorize(false),
        borderColor: colorize(true),
        borderWidth: 2,
      }
    },
  plugins: {
    legend: {
      labels: {
        boxHeight: 10,
        usePointStyle: true,
        pointStyle: 'rect',
        font: {
          family: 'Segoe UI',
        },
      },
    }
  },
};

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, {
  data,
  options
});

[muskankhedia]

It worked. Thanks you :)