score:5
You can do it they way Jeremy mentioned, by setting the colors options for each chart. Or you can override the default color array as follows
Highcharts.setOptions({
colors:['red','green','blue']
});
The benefit of this approach is you only have to call this once, before create any chart. And all charts after this will use these colors, without you needing to set this option on each chart. Most of the websites have a common.js or a similar javascript file that is generally loaded before any other custom script, you just need to add this code to that file and forget about the colors thereafter
Update
Since you want all series in the same chart to be of a single color, you can override the colors array completely and make it have only one color
Highcharts.getOptions().colors = ['red'];
This method will leave the navigator (blue mini graph at bottom in Highstock) to be of default blue color, this has to be overriden in a different way from options.
P.S. the above way is not the recommended way of overriding default options, correct way would be to do setOptions()
, but that would cause a merge with existing defaults and hence the array size would be more than 1.
Alternately, you can just override the getColor method as follows, to always return the color of your choice. Again you need to do this before you call the chart's constructor
Highcharts.Series.prototype.getColor=function(){
this.color= '#f00';
}
score:1
You can define an array of hex colors, and then use that array in your chart declaration. All series in the chart object will pull from this array of colors.
If you have multiple chart declarations, you can just use the same array.
Here's one of the Highcharts samples, with an array of custom colors added (run with jsfiddle):
$(function () {
var myColors = [
'#ff0000',
'#ff6600',
'#ffcc00'
];
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
colors: myColors,
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
});
Hope this helps!
Source: stackoverflow.com
Related Query
- Use single color for all series in the same chart
- How to use add series and update methods in the high chart wrapper for angular?
- How to show Legends for all the series data in stacked column chart Highcharts?
- Possible to force Highcarts to use the circle symbol for all the series in a line graph?
- How to use the tooltip formatter and still display chart color (like it does by default)?
- How can I hide ALL series with the same ID with a button on highcharts? (line graph)
- Use MySQL data as the chart data for the cakephp highchart plugin
- Highcharts: make y-axis extremes the same for two data series with different units
- Highcharts context menu button appearing thrice for the same chart
- Highcharts - In area chart how to use gradient color for multiple series?
- How to use Highcharts React to create chart with multiple lines for same XAxis?
- How to use for loop array to add series dynamically for line chart
- How to display the total of the series values for a donut chart in Highcharts?
- white border/line color set on hover for the bubbles in the bubble chart not being reset on mouse out from bubble
- Use different markers in the same series of an irregular time highchart
- change datalabels color in a HighCharts chart when hovering without updating the series
- How to change the color of single point in spiderweb chart
- How can I set the legend symbol color for a series when using colorByPoint?
- how to add an color picker control to highchart for changing the color of series by user
- HighCharts - Enable the markers for the series which has only single data point?
- Highmaps - Choropleth maps - All area are the same color
- How can I capture all points belonging to the same series with the same xAxis value without a loop?
- HighStock Library: How to keep the same color for each segment in case of selecting
- Get all series values when click on single line chart
- What's the code in Highcharts such that the bars (columns) in the same group use the same color?
- Highstock And Highcharts: How I use StockChart and pie chart on the same page
- Highcharts: Highmaps - Choropleth maps - All states are the same color
- Fetching all the Project Name for a Project Cumulative Flow Chart in Rally
- Save series chart type for later use
- How to use 'compare' for all series except one
More Query from same tag
- How can hide the icon legend
- How to retrieve parent category when using grouped categories in Highcharts?
- how to divide two columns on series with json in highchart
- Drawing a small vertical line on top of chart using High charts by specifying end coordinates
- Why highchart returning " Typeerror : undefined variable byte "?
- Highcharts - how can a chart with multi pies change container height automatic?
- How to get Visible/ In-Visible legend elements in Highcharts
- How to prevent label overlapping? How to write text at a point relative to plotLines?
- How to make Javascript output brackets for an Array of Arrays. (For Highcharts)
- highchart-export-server --batch command running but not converting json into png
- Highchart x-axis not printing date values
- How to customize the crosshair Line for Highcharts
- Remove gap between series in stacked column chart
- Javascript HighCharts Math Operations in ToolTip
- Highcharts - kind of hack for stick plot timeseries
- Load mysql data to Highcharts line chart using JSON
- Why .html() doesn't work with SVG selectors using jquery ?
- use a service inside a funcion
- Highcharts Booster not working in Styled Mode
- Multiple X-axis values in highcharts
- Highcharts update chart scroll issue- scroll to initial position
- Why does opening a CSV file in Excel break my Highcharts chart?
- Highchart: Bar Chart with time duration
- Highchart: Datetime X-Axis labels are not showing correctly
- script not running in templateurl
- How to handle Highcharts events from an AngularJS directive?
- Highcharts: trying to update series
- Highchart bar chart handle over lapping data lables for series
- Highchart changing crosshair color depending on value of y-axis
- Highcharts solid gauge with multiple series