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

by

1👍

✅

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>

Leave a comment