CODEWITHSUNDEEP
javascriptjquerychartshighcharts
logan Sarav
logan Sarav

Reputation: 781

Highchart - Bell curve fill colour based on percentage

What am i working on is, to create a bell curve and a fill the curve with colour to show that you have got 50 % or 60 % etc.

What i have done till now is: Created a bell curve using spline chart in highcharts, now I want to limit the colour inside the chart based on the user percentage. I have no idea how this can be done in the highchart, Could anyone point me in the right direction.

I have tried to change the colour based on the http://www.highcharts.com/plugin-registry/single/33/Multicolor%20series, but it have affected the bell curve.

Here is the fiddle link: http://jsfiddle.net/decs7eg1/5/

$(function () {
   $('#container').highcharts({
     chart: {
        type: 'areaspline'
     },
     title: {
        text: 'Average score'
     },
     legend: {
        enabled:false
     },
     xAxis: {
        categories: [
            '0',
            '25',
            '50',
            '75',
            '100'
         ]
     },
     yAxis: {
        title: {
            text: 'Fruit units'
        }
     },
     tooltip: {
        enabled:false
     },
     credits: {
        enabled: false
     },
     plotOptions: {
        enabled:false
     },
     series: [ {
        name: 'Jane',
        data: [0, 0.5, 2, 0.5, 0]
     }]
  });
});

Upvotes: 2

Views: 2357

Answers (1)

PHP Worm...
PHP Worm...

Reputation: 4224

You can't achieve the same output by using areaspline type of highchart

I am adding two demos one with using areaspline and other with simple line chart use according to your requirements:

  1. areaspline: http://jsfiddle.net/decs7eg1/8/
  2. line: http://jsfiddle.net/decs7eg1/7/
  3. Vertical areaspline: http://jsfiddle.net/decs7eg1/10/

To do this just add these lines in your code:

zones: [{
               value: 0,
               color: 'red'
            }, {
               value: 0.5,
               color: 'yellow'
            }, {
                value: 1,
               color: 'blue'
            }, {
                value: 2,
               color: 'green'
            }]

For further references refer to this link: http://www.highcharts.com/docs/chart-concepts/series

Upvotes: 2

Related Questions