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

# # Quadrants

const config = { type: 'scatter', data: data, options: { plugins: { quadrants: { topLeft: Utils.CHART_COLORS.red, topRight: Utils.CHART_COLORS.blue, bottomRight: Utils.CHART_COLORS.green, bottomLeft: Utils.CHART_COLORS.yellow, } } }, plugins: [quadrants] };

    const config = {
      type: 'scatter',
      data: data,
      options: {
        plugins: {
          quadrants: {
            topLeft: Utils.CHART_COLORS.red,
            topRight: Utils.CHART_COLORS.blue,
            bottomRight: Utils.CHART_COLORS.green,
            bottomLeft: Utils.CHART_COLORS.yellow,
          }
        }
      },
      plugins: [quadrants]
    };

const quadrants = { id: 'quadrants', beforeDraw(chart, args, options) { const {ctx, chartArea: {left, top, right, bottom}, scales: {x, y}} = chart; const midX = x.getPixelForValue(0); const midY = y.getPixelForValue(0); ctx.save(); ctx.fillStyle = options.topLeft; ctx.fillRect(left, top, midX - left, midY - top); ctx.fillStyle = options.topRight; ctx.fillRect(midX, top, right - midX, midY - top); ctx.fillStyle = options.bottomRight; ctx.fillRect(midX, midY, right - midX, bottom - midY); ctx.fillStyle = options.bottomLeft; ctx.fillRect(left, midY, midX - left, bottom - midY); ctx.restore(); } };

    const quadrants = {
      id: 'quadrants',
      beforeDraw(chart, args, options) {
        const {ctx, chartArea: {left, top, right, bottom}, scales: {x, y}} = chart;
        const midX = x.getPixelForValue(0);
        const midY = y.getPixelForValue(0);
        ctx.save();
        ctx.fillStyle = options.topLeft;
        ctx.fillRect(left, top, midX - left, midY - top);
        ctx.fillStyle = options.topRight;
        ctx.fillRect(midX, top, right - midX, midY - top);
        ctx.fillStyle = options.bottomRight;
        ctx.fillRect(midX, midY, right - midX, bottom - midY);
        ctx.fillStyle = options.bottomLeft;
        ctx.fillRect(left, midY, midX - left, bottom - midY);
        ctx.restore();
      }
    };

const DATA_COUNT = 7; const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100}; const data = { datasets: [ { label: 'Dataset 1', data: Utils.points(NUMBER_CFG), borderColor: Utils.CHART_COLORS.red, backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5), }, { label: 'Dataset 2', data: Utils.points(NUMBER_CFG), borderColor: Utils.CHART_COLORS.blue, backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5), } ] };

    const DATA_COUNT = 7;
    const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
    const data = {
      datasets: [
        {
          label: 'Dataset 1',
          data: Utils.points(NUMBER_CFG),
          borderColor: Utils.CHART_COLORS.red,
          backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
        },
        {
          label: 'Dataset 2',
          data: Utils.points(NUMBER_CFG),
          borderColor: Utils.CHART_COLORS.blue,
          backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
        }
      ]
    };

## # Docs

- Data structures (`labels`)
- Plugins
- Scatter