We've done some mockups of charts we want to include on our website, and we'd be thrilled if we could use Highcharts. But so many of the Highcharts work we see looks fairly identical...
Just how customizable is Highcharts? Could we conceivably use it to create charts that look exactly like these mockups? E.g. with
- Moving averages
- Attractive dots indicating the high and low
- Purely decorative gradients
- "Key" overlay showing what color line represents what
So what do you think? Is Highcharts up to this exact job provided we hack up enough Javascript & styling?
Mockup: http://cl.ly/image/1f0m3l241e2S
Yes, you can definitely do those things with HighCharts! The motto around my work here is "anything is possible."
For the dots indicating the highs and lows, you are going to want to use "symbols" for the points such as found in this example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-symbols/
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
y: 26.5,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}, 23.3, 18.3, 13.9, 9.6]
For gradients, you can use the "linear gradient" functionality of SVG and attach it to the background color. Here's an example of that: http://jsfiddle.net/WNDUH/10/ What you are going to be working with there is the "stops" to change the opacity and color (also fiddle with the 300 to get the height right):
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
As for the key overlay, that is your standard legend, just absolutely positioned like so: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
As for the moving average, that is basically going to be its own calculated series.
Like @nathancahill said there is a learning curve, but it looks like much of what you asked can be done without "hacking" anything in HighCharts.
Hope that helped you out!
