CODEWITHSUNDEEP
javascriptchartshighcharts
morteza mortezaie
morteza mortezaie

Reputation: 1564

Gradient for Highchart column in special way

I've drawn a column chart with gradient Highcharts library .

that you can see here

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column',
      spacingBottom: 0,
      spacingTop: 0,
      spacingLeft: 0,
      spacingRight: 0,
      events: {
        load: function() {
          this.xAxis[0].setExtremes(0, 5);
        }
      }
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    xAxis: {
      categories: [
        'S1',
        'S2',
        'S3',

      ],
      crosshair: false,
      gridLineWidth: 0,
      tickWidth: 0
    },
    yAxis: {
      min: 0,
      max: 100,
      title: {
        text: ''
      },
      labels: {
        enabled: false
      },
      gridLineWidth: 0,
    },
    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0
      }
    },
    series: [{
      name: 'S1',
      data: [30, 50, 100],
      color: {
        linearGradient: {
          x1: 0,
          x2: 0,
          y1: 0,
          y2: 1
        },
        stops: [
          [0, 'red'],
          [1, 'green']
        ]
      }

    }]

  });


});
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" ></div>

The problem is about gradient ,

I have three bars here enter image description here

the first column value is 30

the second is 50

and last is 100

but gradient is the same for all !

(all of the have green and red )

and it is not right !

I want a gradient in order that

the first column to be in green zoon

something like this

enter image description here

How can I achieve it ?

Upvotes: 1

Views: 330

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

From docs:

Note that linear gradients can be differently defined (as an array or an object). Also, start/end positions might be calculated differently depending on the gradientUnits property (this property can only be set in linear gradient declared as object).

gradientUnits values:

  • userSpaceOnUse Default when gradient declared as an array. Start and end positions have to be declared as pixels on the chart.

  • objectBoundingBox Default when gradient declared as an object. Start and end positions are in the range of 0 to 1 as described above. Using this might sometimes result in the disappearance of the coloured element.

So, instead of object for linearGradient, use array (which has values in pixels).

  color: {
    linearGradient: [0, 0, 0, 400],
    stops: [
      [0, 'red'],
      [1, 'green']
    ]
  }

Live demo: https://jsfiddle.net/BlackLabel/tfxLpck1/

Docs: https://www.highcharts.com/docs/chart-design-and-style/colors

Upvotes: 2

Related Questions