CODEWITHSUNDEEP
javascriptreactjschartslinechartapexcharts
Gowdham GM
Gowdham GM

Reputation: 71

How to apply a color gradient to a line chart using APEXCHARTS

How to achieve this color gradient on line chart Y axis limit range is within 60 blue color line, 60 to 80 yellow and 80 to 100 red

I followed this official documentation https://codepen.io/apexcharts/pen/RvqdPb

code:

var options = {
    chart: {
      height: 380,
      type: "line",
      foreColor: '#6D6D6D'
    },
    series: [
      {
        name: "Series 1",
        data: [2, 30, 60, 100, 20]
      }
    ],
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.7,
        opacityTo: 0.9,
        colorStops: [
          {
            offset: 60,
            color: "blue",
            opacity: 1
          }
          {
            offset: 80,
            color: "yellow",
            opacity: 1
          },
          {
            offset: 100,
            color: "red",
            opacity: 1
          }
        ]
      }
    },
    grid: {
       borderColor: '#6D6D6D'
    },
    xaxis: {
      categories: [
        "01 Jan",
        "02 Jan",
        "03 Jan",
        "04 Jan",
        "05 Jan"
      ]
    }
  };
  
  var chart = new ApexCharts(document.querySelector("#chart"), options);
  
  chart.render();

What is incorrect about this? I receive this result. enter image description here

Upvotes: 2

Views: 3336

Answers (1)

Badacadabra
Badacadabra

Reputation: 8497

By default, gradients are horizontal. If you want a vertical gradient instead, you have to set fill.gradient.type like so:

fill: {
  gradient: {
    type: 'vertical'
  }
}

Then you have to play with fill.gradient.colorStops, knowing that these stops do not correspond to actual values: How create chart of temperature with gradient? · Issue #2125 · apexcharts/apexcharts.js · GitHub

It seems the best thing you can do for now is something like that:

let options = {
  chart: {
    type: 'line',
    height: 350
  },
  series: [
    {
      name: 'Series',
      data: [5, 30, 60, 100, 60, 30, 5]
    }
  ],
  xaxis: {
    categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan']
  },
  stroke: {
    curve: 'smooth'
  },
  fill: {
    type: 'gradient',
    gradient: {
      type: 'vertical',
      colorStops: [
        {
          offset: 0,
          color: 'red'
        },
        {
          offset: 25,
          color: 'yellow'
        },
        {
          offset: 50,
          color: 'blue'
        }
      ]
    }
  },
  tooltip: {
    enabled: false
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>

Upvotes: 2

Related Questions