chart.jsreact-chartjs-2

Gradient color under Line Chart


I want to create this kind of color under a line chart.

I searched for a solution but can't find one that uses react-chart-js2. I want to do this without using the plugin.


Solution

  • Well this should work very easy out-of-the-box (no plugin needed), you just need to set the backgroundColor property to a function, that outputs a gradient. (And set the fillproperty to the desired values).

    Although, I can't say how you would have to integrate this with react, this is plain chartjs.

    Here a demo, how I would do this:
    (based on this official example )
    The function for the gradient getGradient was taken from the above mentioned example.

    const lineChartData = {
        labels: [
          '01/22',
          '02/22',
          '03/22',
          '04/22',
          '05/22',
          '06/22',
          '07/22',
          '08/22',
        ],
        datasets: [
          {
            label: 'Profit',
            data: [2.4, 2.6, 2.23, 1.2, -2.2, -3.6, -1, 0.2],
            borderColor: '#0B9564',
            pointBackgroundColor: 'transparent',
            pointBorderColor: 'transparent',
            borderJoinStyle: 'bevel',
            // the following 2 properties are the ones that need to be set
            fill: {
                value: -25,
            },
            backgroundColor: (context) => {
              const chart = context.chart;
              const {ctx, chartArea} = chart;
              if (!chartArea) {
                // This case happens on initial chart load
                return;
              }
              return getGradient(ctx, chartArea);
            },
          },
        ],
      };
    
    let width, height, gradient;
    
    function getGradient(ctx, chartArea) {
      const chartWidth = chartArea.right - chartArea.left;
      const chartHeight = chartArea.bottom - chartArea.top;
      if (!gradient || width !== chartWidth || height !== chartHeight) {
        // Create the gradient because this is either the first render
        // or the size of the chart has changed
        width = chartWidth;
        height = chartHeight;
        gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
        gradient.addColorStop(1, 'rgba(0,128, 0, 1)');
        gradient.addColorStop(.25, 'rgba(0,128, 0, 0)');
      }
      return gradient;
    }
    const config = {
        type: 'line',
        data: lineChartData,
        options: {
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        usePointStyle: true,
                    },
                }
            },
        }
    };
    
    var myChart = new Chart(
        document.getElementById('chart'),
        config
    );
    <script src="//cdn.jsdelivr.net/npm/chart.js"></script>  
    
    <div class="chart" style="height:184px; width:350px;">
        <canvas  id="chart" ></canvas>
    </div>

    Checkout: the documentation for details on the color properties / features and the line Chart properties