score:4

Accepted answer

you have to register your own plugin to fill chartarea before chart line drawing:

chart.pluginservice.register({
  beforedraw: function (chart, easing) {
    if (chart.config.options.fillcolor) {
      var ctx = chart.chart.ctx;
      var chartarea = chart.chartarea;
      ctx.save();
      ctx.fillstyle = chart.config.options.fillcolor;
      ctx.fillrect(chartarea.left, chartarea.top, chartarea.right - chartarea.left, chartarea.bottom - chartarea.top);
      ctx.restore();
    }
  }
});

var chartdata = {
  labels: ['a', 'b', 'c', 'd'],
  datasets: [{
    label: 'value',
    backgroundcolor: 'rgba(255, 0, 255, 0.8)',
    bordercolor: 'blue',
    data: [30, 50, 25, 10]
  }]
};

var ctx = document.getelementbyid("mychart").getcontext("2d");
var mybar = new chart(ctx, {
  type: 'line',
  data: chartdata,
  options: {
  	scales: {
    	yaxes: [{ ticks: { max: 60 } }]
    },
  	legend: { display: false },
		fillcolor: 'rgba(255, 128, 0, 0.8)',
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>

<canvas id="mychart" height="300" width="500"></canvas>


Related Query

More Query from same tag