CODEWITHSUNDEEP
javascriptchart.js
hdwebpros
hdwebpros

Reputation: 650

Having problems getting a line chart in Chartsjs to go *up* to 1, with bkg fill *under* the chart line

I'm working on creating a line chart in Chart.js to show an uptick (hopefully) from high to low. Think of "what place did you finish", "what search rank position", etc for the logic where #1 is the best.

I read through the docs and didn't see how to do this. I tried 2 methods:

Both of those solutions have the line of the chart going in the right direction, however, the filled in section is the wrong area. It colors in the area above the line, not below it.

I'm using Chart.js v. 2.7.2

Here's my script running it

var ctx = document.getElementById('all-canvas').getContext("2d");
var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#ca38d4');
gradientStroke.addColorStop(1, '#d43842');
var myChart = new Chart(ctx, {
  "type": "line",
  "data": {
    "labels": ["september", "October", "November", "December", "January", "February", "March", "April", "May", "June", "July"],
    "datasets": [{
      "data": [75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 78.833333333333, 70, 72.333333333333],
      "fill": true,
      backgroundColor: gradientStroke,
      borderColor: gradientStroke,
      "spanGaps": false,
      radius: 0
    }]
  },
  "options": {
    "legend": {
      "display": false
    },
    scales: {
      yAxes: [{
        ticks: {
          fontColor: "transparent",
          padding: 20,
          beginAtZero: true,
          reverse: true
        },
        gridLines: {
          drawTicks: false,
          display: false
        }

      }],
      xAxes: [{
        gridLines: {
          drawTicks: false,
          display: false
        },
        ticks: {
          padding: 20,
          fontColor: "transparent"
        }
      }]
    }
  },
  "fill": true
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="all-canvas"></canvas>

Any idea how I can get the fill line under the chart line when I have a chart that goes up to 1?

Upvotes: 2

Views: 373

Answers (1)

timclutton
timclutton

Reputation: 13024

The documentation isn't obvious, and it's under 'Area charts', but you can control the 'direction' of the fill using the fill option.

I find it easier looking at the sample charts that clearly show what each option does.

Setting fill: 'start' in the dataset reverses the effect in your chart:

var ctx = document.getElementById('all-canvas').getContext("2d");
var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#ca38d4');
gradientStroke.addColorStop(1, '#d43842');
var myChart = new Chart(ctx, {
  "type": "line",
  "data": {
    "labels": ["september", "October", "November", "December", "January", "February", "March", "April", "May", "June", "July"],
    "datasets": [{
      "data": [75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 78.833333333333, 70, 72.333333333333],
      "fill": 'start',
      backgroundColor: gradientStroke,
      borderColor: gradientStroke,
      "spanGaps": false,
      radius: 0
    }]
  },
  "options": {
    "legend": {
      "display": false
    },
    scales: {
      yAxes: [{
        ticks: {
          fontColor: "transparent",
          padding: 20,
          beginAtZero: true,
          reverse: true
        },
        gridLines: {
          drawTicks: false,
          display: false
        }

      }],
      xAxes: [{
        gridLines: {
          drawTicks: false,
          display: false
        },
        ticks: {
          padding: 20,
          fontColor: "transparent"
        }
      }]
    }
  }
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="all-canvas"></canvas>

Upvotes: 1

Related Questions