Highcharts custom colours - highcharts

Question

$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'emmisions2015',
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
innerSize: '60%'
}
},
series: [{
data: [
['Direct Emissions', 5],
['Purchased Electricity', 15],
['Transport', 40]
]}]
},
// using
function(chart) { // on complete
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
fill: '#fff',
}).add();
// Render the text
chart.renderer.text('2015', 370, 225).css({
width: circleradius*2,
color: '#87868a',
fontSize: '23px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
});
Hello! we are trying to these graphs with the exact same colours:
We have this code that generates de graphs but it doesn't take the custom colours we want. In other words we try to add our custom colour codes but it doesn't seem to take them. TIA for your help/ideas.

Answer 1

You can simply prepend your set of colors or override the existing colors by just passing the color palette as an array.
Here is the default colors of Highcharts
colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce','#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']
From image i can say these are the colors you want
'#51b5ce', '#89c733', '#54a329'
now simply add this to the chart
colors: ['#51b5ce', '#89c733', '#54a329','#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
This will work for you. Here is a jsfiddle for your reference.

Answer 2

Colors could be set for chart - for all series.
This could be overridden for each series by setting colors for a series when using color by point. For pie type series colorByPoint is set to true by default.
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'emmisions2015',
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
innerSize: '60%'
}
},
series: [{
colors: ['#f0f','#ff0','#0ff'],
data: [
['Direct Emissions', 5],
['Purchased Electricity', 15],
['Transport', 40]
]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="emmisions2015"></div>