Bar Chart | Chart.js
Description: Open source HTML5 Charts for your website

# # Bar Chart

Demo selecting bar color based on the bar's y value.

function colorize(opaque) { return (ctx) => { const v = ctx.parsed.y; const c = v < -50 ? '#D60000' : v < 0 ? '#F46300' : v < 50 ? '#0358B6' : '#44DE28'; return opaque ? c : Utils.transparentize(c, 1 - Math.abs(v / 150)); }; } const config = { type: 'bar', data: data, options: { plugins: { legend: false, }, elements: { bar: { backgroundColor: colorize(false), borderColor: colorize(true), borderWidth: 2 } } } };

    function colorize(opaque) {
      return (ctx) => {
        const v = ctx.parsed.y;
        const c = v < -50 ? '#D60000'
          : v < 0 ? '#F46300'
          : v < 50 ? '#0358B6'
          : '#44DE28';
        return opaque ? c : Utils.transparentize(c, 1 - Math.abs(v / 150));
      };
    }
    const config = {
      type: 'bar',
      data: data,
      options: {
        plugins: {
          legend: false,
        },
        elements: {
          bar: {
            backgroundColor: colorize(false),
            borderColor: colorize(true),
            borderWidth: 2
          }
        }
      }
    };

function generateData() { return Utils.numbers({ count: DATA_COUNT, min: -100, max: 100 }); } const data = { labels: Utils.months({count: DATA_COUNT}), datasets: [{ data: generateData(), }] };

    function generateData() {
      return Utils.numbers({
        count: DATA_COUNT,
        min: -100,
        max: 100
      });
    }
    const data = {
      labels: Utils.months({count: DATA_COUNT}),
      datasets: [{
        data: generateData(),
      }]
    };

const DATA_COUNT = 16; Utils.srand(110); const actions = [ { name: 'Randomize', handler(chart) { chart.data.datasets.forEach(dataset => { dataset.data = generateData(); }); chart.update(); } }, ];

    const DATA_COUNT = 16;
    Utils.srand(110);
    const actions = [
      {
        name: 'Randomize',
        handler(chart) {
          chart.data.datasets.forEach(dataset => {
            dataset.data = generateData();
          });
          chart.update();
        }
      },
    ];

## # Docs

- Bar
- Data structures (`labels`)
  - Dataset Configuration (`stack`)
- Options
  - Scriptable Options