javascript - ChartJS different background gradient depending on data (line graph) - Stack Overflow

admin管理员组

文章数量:1316692

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).

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).

• javascript
• ruby-on-rails
• chart.js

Share Improve this question Follow asked Oct 3, 2018 at 22:07 Brad HBrad H 6411 silver badge66 bronze badges 2

• Please read How do I ask a good question? and How to create a Minimal, Complete, and Verifiable example. 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 Commented Oct 4, 2018 at 8: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 Commented Oct 4, 2018 at 16:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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./chartjs/Chart.js/issues/3071#issuement-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./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./ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
<canvas id="chart"></canvas>

Excellent answer from @Timclutton, indeed from the version 3.x already supports it natively where above represents the positive color and below the negative color

本文标签： javascriptChartJS different background gradient depending on data (line graph)Stack Overflow