CODEWITHSUNDEEP
javascriptcharts
Game Unity
Game Unity

Reputation: 125

Chart JS line chart: fill area above line instead of under the line

I have this line chart here below. I'm trying to switch the backgroundColor property. By default, it is rendered from the x-axis to the data-line. But as you see I have negative values here so in my case, it would make sense to fill the area which is currently transparent, instead of the default area. I was looking at the fill option, none of the options worked.

I guess if this not a default option, you should be able to write a plugin for it, but that's behind my horizon. 

var ctx = document.getElementById("myChart").getContext('2d');

window['gradient'] = ctx.createLinearGradient(0, 0, 0, 450);
window['gradient'].addColorStop(0, 'rgba(253, 200,0, 0.5)');
window['gradient'].addColorStop(0.5, 'rgba(253, 200, 0, 0.25)');
window['gradient'].addColorStop(1, 'rgba(253, 200, 0, 0)');

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Tokyo",	"Mumbai",	"Mexico City",	"Shanghai",	"Sao Paulo",	"New York",	"Karachi","Buenos Aires",	"Delhi","Moscow"],
        datasets: [{
            label: 'Series 1', // Name the series
            data: [-500,	-50,	-2424,	-14040,	-14141,	-4111,	-4544,	-47,	-5555, -6811], // Specify the data values array
            backgroundColor: window['gradient'],
            borderColor: 'rgba(253, 200,0, 1)', // Add custom color border (Line)
            borderWidth: 1 // Specify bar border width
        }]},
    options: {
      responsive: true, // Instruct chart js to respond nicely.
      maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="600" height="400"></canvas>

Upvotes: 0

Views: 1480

Answers (1)

jumpjack
jumpjack

Reputation: 990

  • Add a "fill : 1" parameter to dataset 0
  • Add a second dataset with constant values = minimum value of dataset 0 (or less):
        {
            label: 'Series 2', // Name the series
            data: [-15000,  -15000, -15000, -15000, -15000, -15000, -15000, -15000, -15000, -15000], // Specify the data values array
            backgroundColor:  'rgba(255, 255,255, 1)',
            borderColor: null, 
            borderWidth: 0, // <<<< no border
            pointRadius: 0, // <<<< No dots
            fill: 1
        },

Hence final array of datasets is:

        datasets: [
        {
            label: 'Series 1', // Name the series
            data: [-500,    -50,    -2424,  -14040, -14141, -4111,  -4544,  -47,    -5555, -6811], // Specify the data values array
            backgroundColor: window['gradient'],
            borderColor: 'rgba(253, 200,0, 1)', // Add custom color border (Line)
            borderWidth: 1, // Specify bar border width
            fill: 1
        },
        {
            label: 'Series 2', // Name the series
            data: [-15000,  -15000, -15000, -15000, -15000, -15000, -15000, -15000, -15000, -15000], // Specify the data values array
            backgroundColor:  'rgba(255, 255,255, 1)',
            borderColor: null,
            borderWidth: 0, // <<<< no border
            pointRadius: 0, // <<<< No dots
            fill: 1
        },
        ]},

But you'll have to deal with an additional label in legend.

Upvotes: 1

Related Questions