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
- Create chart in tooltip formatter
- How to get current level on drilldown event in Highcharts treemap?
- How to call a method on a function OR how to redraw Highcharts dynamically
- highchart/highstock tooltip does not adjust after zoom
- Sankey paths/links are loosing their width when the link has a big curve
- spark-highcharts export to file (png or pdf)
- Highcharts - Multiple Charts On Mobile Page
- Highcharts DateTime not parsing correctly
- how to get each key and value from object in javascript for high chart graph
- Trying to set xAxis extremes using highcharts-vue wrapper
- HighCharts Context Button
- Highcharts sync is not working horizontally
- Highcharts - Categories and X,Y data
- Highcharts - Possible to change the text zoom to other wording?
- How to align two pie graphs (highcharts) next to each other
- Highchart: show seconday y-axis tick positions 0 to 12
- How to add title of axis in Highcharts
- Error: GET http://mywebsite.com/tmp/highchart_oqoCdS 403 (Forbidden)
- HighCharts: How to get a specific color for value 0
- Highcharts datalabels with gradient color
- Data From Ajax Response Can't Be Loaded In HighChart
- Highcharts :Cannot read property 'parentGroup' of undefined with AngularJS
- Highchart bar chart datalabels overlapping issue
- Use different object property names for x and y axes
- Wrong date display in Highcharts graph
- Turn series and plot bands on/off using API
- Highcharts Server side generation not working on windows 2008 server
- highcharts dataLabels support RTL with enable hover it for show tooltip
- Highcharts - Scatter plot single series with multicolor plots (points)
- Highcharts Bar - Display DataLabel at the right end of the plot