Menu
I am using HighCharts for a line graph report. In this specific report I have been asked to Customize the colours of each series. The series will always stay the same. So for example:
John series: Blue dashed line Mary series: Solid Red Line
Does anyone know how to accomplish this?
941
Add which colors you want to colors and then set colorByPoint to true . Reference: http://api.highcharts.com/highstock#colors. http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint.
You can pass multiple series in array and the chart can be generated.
Options for the point markers of line-like series. Properties like fillColor , lineColor and lineWidth define the visual appearance of the markers. Other series types, like column series, don't have markers, but have visual options on the series level instead.
Options can be set separately for each series.
var chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, xAxis: { type: 'datetime' }, series: [{ name: 'John', color: '#0066FF', dashStyle: 'ShortDash', data: [ [Date.UTC(2010, 0, 1), 29.9], [Date.UTC(2010, 2, 1), 71.5], [Date.UTC(2010, 3, 1), 106.4] ] },{ name: 'Mary', color: '#FF0000', data: [ [Date.UTC(2010, 0, 1), 60.9], [Date.UTC(2010, 1, 1), 40.5], [Date.UTC(2010, 2, 1), 90.0], [Date.UTC(2010, 3, 1), 80.4] ] }] }); JsFiddle Example
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
