2

I am trying to create something that looks like this using ChartJS line graph. I've got the top gradient working as I want, I just cannot find a way to get the bottom gradient to change when my data value is below 0.

I've tried using an array of different background colors based on my data and I have tried using plugin beforeDraw to change the background color (it changed them all to the same color).

example

Brad H
  • 54
  • 1
  • 6
  • Please read [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) and [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Currently it's unclear exactly what your problem is and what you want to achieve. Your screenshot shows a line that changes stroke and fill colour when it goes below 0. Is that what your code does now? Is it an example of what you want to achieve? – timclutton Oct 04 '18 at 08:35
  • 2
    The photo is the graph I am trying to achieve. I need a different background color for positive and negative data. Sorry I did not make that clear. I appreciate your constructive criticism of my post. Thank you. – Brad H Oct 04 '18 at 16:49

1 Answers1

6

Chart.js issue #3071 Multiple fill colors for line chart seems to match your objective. The official response is to use a CanvasGradient. Fortunately, 'berosoboy' has posted an inline plugin to do this. A working example is included below. I've modified it slightly to remove references to window.myColors.

let posColour = 'rgba(0, 255, 0, .1)',
  negColour = 'rgba(255, 0, 0, .1)',
  myBarChart = new Chart(document.getElementById('chart'), {
    type: 'line',
    data: {
      labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
      datasets: [{
        label: 'Series1',
        data: [1, -1, 1, -1, 1, -1, 1, -1, 1, -1]
      }]
    },
    options: {
      maintainAspectRatio: false
    },
    // source: https://github.com/chartjs/Chart.js/issues/3071#issuecomment-371001496
    plugins: [{
      beforeRender: function(c, options) {
        var dataset = c.data.datasets[0];
        var yScale = c.scales['y-axis-0'];
        var yPos = yScale.getPixelForValue(0);

        var gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
        gradientFill.addColorStop(0, posColour);
        gradientFill.addColorStop(yPos / c.height - 0.01, posColour);
        gradientFill.addColorStop(yPos / c.height + 0.01, negColour);
        gradientFill.addColorStop(1, negColour);

        var model = c.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].$filler.el._model;
        model.backgroundColor = gradientFill;
      }
    }]
  });
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>

Chart.js v3.x supports this natively:

let posColour = 'rgba(0, 255, 0, .1)',
  negColour = 'rgba(255, 0, 0, .1)',
  myBarChart = new Chart(document.getElementById('chart'), {
    type: 'line',
    data: {
      labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
      datasets: [{
        label: 'Series1',
        data: [1, -1, 1, -1, 1, -1, 1, -1, 1, -1],
        fill: {
          target: 'origin',
          above: posColour,
          below: negColour
        }
      }]
    },
    options: {
      maintainAspectRatio: false
    }
  });
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
<canvas id="chart"></canvas>
timclutton
  • 12,682
  • 3
  • 33
  • 43