Menu Close

Chart.js  – Color Options

Robin
color-opt

We can make creating charts on a web page easy with Chart.js. In this article, we’ll look at how to create charts with Chart.js.

Indexable Options

Indexable options are options that are arrays. For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [-1, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We have the backgroundColor and borderColor options which are indexable options.

The values are set on the bars according to the bars’ indexes.

Option Context

The option content gives us contextual information when we resolving options.

They are used only with scriptable options.

The properties of the context object include:

  • chart — the chart we’re modifying
  • dataIndex — index of the current data
  • dataset — dataset at index datasetIndex
  • datasetIndex — index of the current dataset
  • hover — true if hovered

Colors

We can set the color options in various ways.

One way is to change the background color to a fill pattern.

For example, we can write:

var img = new Image();
img.src = 'https://www.toptal.com/designers/subtlepatterns/patterns/more-leaves.png';

img.onload = function() {
  var ctx = document.getElementById('myChart').getContext('2d');
  var fillPattern = ctx.createPattern(img, 'repeat');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow'],
      datasets: [{
        label: '# of Votes',
        data: [2, 19, 3],
        backgroundColor: fillPattern,
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
};

We created an Image instance and we called the createPattern method of the context to create a fill pattern that we can use in our chart bars.

'repeat' makes the pattern repeat to fill the bars.

Then we set that as the value of backgroundColor and it’ll show as the bar color.

We can use it with the following HTML:

<script src='https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js'></script>

<script src="https://cdn.jsdelivr.net/npm/patternomaly@1.3.2/dist/patternomaly.min.js"></script>

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

Then we can create a chart by writing:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [2, 19, 3],
      backgroundColor: [
        pattern.draw('square', '#ff6384'),
        pattern.draw('circle', '#36a2eb'),
        pattern.draw('diamond', '#cc65fe'),
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

The pattern.draw method comes from the Patternomaly library.

'square' makes a square repeating pattern.

'circle' makes a circle repeating pattern.

And 'diamond' makes a diamond repeating pattern.

The 2nd argument is the background color.

Now we should see bars with the given background patterns.

Conclusion

We can create charts with various color options with Chart.js.

Total Views: 417
Posted in HTML, JavaScript
Tagged , ,

You can also read...