Geek Answers Handbook

Spline gradient fill

I am using Highcharts for the first time, and it seems impressive. However, I am trying to achieve something similar to:

enter image description here

Can i use hightcharts? I know that you can add gradients to pie charts, but I cannot find anywhere else to achieve this. Can I set a background image on a chart?

+7
highcharts
source share
2 answers

You can set a background image or gradient using:

chart: { type: 'line', plotBackgroundImage: 'http://www.highcharts.com/demo/gfx/skies.jpg' },

or

 chart: { type: 'line', plotBackgroundColor: { linearGradient: [0, 0, 500, 500], stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(200, 200, 255)'] ] } },

http://api.highcharts.com/highcharts#chart.plotBackgroundImage or http://api.highcharts.com/highcharts#chart.plotBackgroundColor

However, this is the background for the plot area, not for the line itself. To give the lines a graded color, you can specify the color of the series as a gradient. eg.

  series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], color: { linearGradient: [0, 0, 0, 500], stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(100, 100, 155)'] ] } }]

http://jsfiddle.net/wXqM9/

The syntax for linear gradients is:

 linearGradient: [x1, y1, x2, y2]

Creates a linear gradient object with a start point (x1, y1) and an end point (x2, y2).

  stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(100, 100, 155)'] ]

This indicates two gradient points and the colors used. In this case, the gradient will go from (255,255,255) at the beginning to (100, 100, 155) and the end. If you specify 3 stops, you can make the gradient go from one color to another in the middle, to another at the end. Hope this helps. I suggest you just try playing around with this in jsfiddle, which I posted to see how it works.

+7
source share

To set the chart background, use chart.plotBackgroundImage . If you want to set an image for the entire chart, use CSS styles for the container.

As for the gradient, it works, look: http://jsfiddle.net/Fusher/2Gzkd/3/

  color: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, 'red'], [0.5, 'green'], [1, 'blue'] ] },
+4
source share

More articles:


All Articles