We Keep Coding

How to set individual colors for high chart pies

I am able to get high chart working by passing series data. This assigns random or theme color for the high chart.
In following example, I am able to see lightblue, black and green. But How do I set predefined colors. For example, I want to use Orange,Red and yellow instead.
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

You can use setOptions for color in Highcharts like below.
Highcharts.setOptions({
colors: ['#ff6600', '#ff0000', '#ffff00']
});
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

how to draw hour and minute value (hh:mm) pie chart using highcharts,javascript

how to draw hh:mm pie chart using highcharts for bellow table

You could try this approach, we get the total amount of time, then create a highcharts chart from the individual points:
const data = [
{
name: 'Line Clear - Line maintenance',
value: '06:29',
color: '#eef441'
},
{
name: 'Incoming Supply Failure (ICF)',
value: '14:44',
color: '#f44242'
},
{
name: '33 KV Line Breakdown',
value: '02:13',
color: '#41f48b'
},
{
name: 'Line Clear - SS maintenance',
value: '00:10',
color: '#4176f4'
},
{
name: 'Momentary Interruptions',
value: '01:11',
color: '#e541f4'
}
];
var totalTimeSeconds = data.reduce((sum,row) => {
return sum + 1.0*moment.duration(row.value).asSeconds();
}, 0.0);
var dataSeries = data.map((row) => {
return {
name: row.name + " (" + row.value +")",
y: moment.duration(row.value).asSeconds() / totalTimeSeconds,
color: row.color
};
});
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Reason Type'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Reason',
colorByPoint: true,
data: dataSeries
}]
});
Here's a JSFiddle that demonstrates this: Reason-Chart

*Actually i'am generating pie chart for table using table id.
So i added another column as seconds,generated table like bellow image.
The bellow Script is used to generate pie chart
<div class="row" style="margin-left: 0px;text-align: center;">
<div id="durationGraphcontainer" style="height: 310px; margin: 0 auto;margin-bottom: 10px;width: 100%"></div>
</div>
// Duration Graph
Highcharts.chart('durationGraphcontainer', {
data: {
table: 'durationGraph'
},
chart: {
type: 'pie'
},
title: {
text : 'Inetrruption Reason Type Graph'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Million Units'
},
stackLabels: {
enabled: true,
align: 'center'
}
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left',
layout: 'vertical',
y: 100,
labelFormatter: function() {
return this.name + " - " + this.percentage.toFixed(2) + "%";
}
},
tooltip: {
pointFormat: '<b>{point.percentage:.2f}%</b>',
formatter: function () {
return this.point.name.toUpperCase();
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: false,
format: '{point.percentage:.2f} %',
} ,
innerSize: 100,
depth: 45,
showInLegend: true
},
},
series:[
{
type: 'pie',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return this.point.y.toFixed(2);
}
}
},{point: {
events: {
click: function() {
}
}
}
}],
credits: {
enabled: false
}
});*

combination chart (area and bar) highchart

I have a bar graph, I want to plot a shaded area on the same graph whose max and min range say are -1000k and -1250k, which most probably is a area-range graph. I cannot find an example in highchart doc, so need help.
The graph I have now -> http://jsfiddle.net/hhh2zx3w/6/
var c2chart3=Highcharts.chart("container1", {
colors: ['rgb(90,198,140)','rgb(255,179,137)','rgb(246,151,159)','rgb(55,183,74)','rgb(169,99,169)','rgb(0,191,243)','rgb(223,200,24)','rgb(242,100,38)'],
chart: {
type: 'bar',
backgroundColor: 'rgba(0,0,0,0.7)',
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
},
title: {
text: ''
},
xAxis: {
title: {
text: null
},
gridLineWidth:0,
lineWidth:0,
tickWidth: 0,
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
formatter: function(){
return ""
}
},
},
yAxis: {
// min: -2000000,
// max: 1000000,
gridLineColor: '#fff',
gridLineWidth: 0,
lineWidth:0,
plotLines: [{
color: '#fff',
width: 1,
value: 0
}],
title: {
text: '',
align: 'high'
},
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px'
},
},
},
tooltip: { enabled: false },
credits: { enabled: false },
exporting: { enabled: false },
plotOptions: {
bar: {
dataLabels: {
enabled: true,
style: {
textOutline: false,
color:'#fff',
}
}
},
series: {
colorByPoint: true,
pointWidth: 1,
borderWidth:0,
dataLabels: {
enabled: true,
formatter: function(){
}
}
}
},
legend: { enabled: false },
credits: { enabled: false },
series: [{
data: [-510362,-371233,-1593711,-388465,352395,179298,-1190969,-907204]
}]
});
What I want is something like shown in the image

The feature you are referring to is called as the "Plot Bands" in Highchart
Here is how you can do it.
plotBands: [{
color: 'tomato',
from: -1000000,
to: -1250000
}],
you can have plot bands with respect to any axis.
Here is a jsfiddle for your ref: http://jsfiddle.net/hhh2zx3w/7/
Highcharts API ref: https://api.highcharts.com/highcharts/yAxis.plotBands

Highcharts. Dynamic labels inside donut chart on mouseOver

so this is what I'm trying to acomplish:
Example
What I need is:
Label inside donut chart changing on mouse over
Color depending on data
Styling label to look like the picture
I actually managed to do the mouse over but I can't change the color according to data and place it in the middle
Here is a fiddle: https://jsfiddle.net/9cjxb97a/1/
Here is the code I wrote so far:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
colors: ['red', 'blue', 'green'],
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
},
series: {
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
})
.css({
color: 'red',
})
.add();
}
chart.lbl
.show()
.attr({
text: this.y + '%'
});
}
}
},
},
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}],
innerSize: '80%'
}],
});
Thanks

Here's your code to display value in between circle.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
exporting:{
enabled:false
},
tooltip: {
enabled:false
},
colors:['red', 'blue', 'green'],
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
},
series: {
point: {
events: {
mouseOver: function () {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
})
.css({
color: 'red',
})
.add();
}
chart.lbl
.show()
.attr({
text: this.y + '%'
});
}
}
},
},
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
headerFormat: '',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '<span style="font-size:40px;color:black; font-weight: bold">{point.y}%</span><br><span>50 Kg</span>{point.custom.customParam}',
positioner: function (labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: this.chart.plotHeight/2
};
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}],
innerSize:'80%'
}],
});

Highchart Combochart Rendered Wrong

I have a combo highchart but this is not rendered correctly, this the code that I am using:
<script type="text/javascript">
$(document).ready(function () {
SCurvechart = new Highcharts.Chart({
chart:
{
events: {
load: function () {
var label = this.renderer.label('Details for Company B')
.css({
width: '450px',
color: '#666666',
fontSize: '16px'
})
.attr({
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'left',
x: 50,
verticalAlign: 'top',
y: 5
}), null, 'spacingBox');
}
},
borderColor: '#BBBBBB',
borderWidth: 1,
plotShadow: true,
renderTo: 'SCurvechart_container',
zoomType: 'xy'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend:
{
align: 'left',
backgroundColor: '#FFFFFF',
floating: true,
layout: 'vertical',
verticalAlign: 'top',
x: 120,
y: 100,
itemStyle: {
color: '#666666',
fontWeight: 'bold',
fontSize: '10px',
font: 'Trebuchet MS, Verdana, sans-serif'
}
},
title:
{
text: ''
},
tooltip:
{
shared: true
},
plotOptions: {
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
events: {
//click: ChartClick
},
showInLegend: false,
stacking: 'normal'
}
},
xAxis:
{
labels:
{
formatter: function () { return this.value; }, style: { color: '#4572A7' },
style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
},
categories: ['25/07/14','29/08/14','26/09/14','31/10/14','28/11/14','26/12/14','30/01/15','27/02/15','27/03/15','24/04/15','29/05/15','26/06/15','31/07/15','28/08/15','25/09/15','30/10/15','27/11/15','25/12/15','29/01/16','26/02/16','25/03/16','29/04/16','27/05/16','24/06/16','29/07/16','26/08/16','30/09/16','28/10/16','25/11/16','30/12/16','27/01/17','24/02/17','31/03/17','28/04/17','26/05/17','30/06/17']
},
yAxis: [
{
min: 0,
labels:
{
formatter: function () { return this.value; }, style: { color: '#4572A7' },
style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
},
opposite: true,
title:
{
style:
{
font: '10px Trebuchet MS, Verdana, sans-serif'
},
text: 'Overall Activities'
}
},
{
labels:
{
formatter: function () { return this.value; }, style: { color: '#89A54E' },
style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
},
title:
{
style:
{
font: '10px Trebuchet MS, Verdana, sans-serif'
},
text: 'Weekly Activities'
}
}],
series: [
{ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,7,3,5,4,1,2,0,0,0,0,0,1,0,1,0,4,0,0,0], name: 'Target', type: 'column', yAxis: 1, color: '#6699CC' },
{ data: [], name: 'Actual', type: 'column', yAxis: 1, color: '#FAC090' },
{ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,,,,,,,,,,,,,,,,,], name: 'Actual Acc', type: 'spline', color: '#FF0000' },
{ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,5,12,15,20,24,25,27,27,27,27,27,27,28,28,29,29,33,,,], name: 'Target Acc', type: 'spline', color: '#376092' }
]
});
});
If you see the compare the chart against the one created in Excel you can see the issue,
https://www.dropbox.com/s/8lrk0vtgwitbdb4/Chart-Screenshot-in-Excel.JPG?dl=0
with the highchart rendered chart:
https://www.dropbox.com/s/c1ga0x3vxa8sbol/Highchart-screenshot.JPG?dl=0
As you can see the line charts are wrong they should be close to each other.
Any help is appreciated.

The problem is that the code setting up the highchart has enabled stacking by setting stacking attribute to 'normal'.
{..., plotOptions: { series: {..., showInLegend: false, stacking: 'normal'}}, ...}
You can disable stacking by removing the stacking attribute. For example...
{..., plotOptions: { series: {..., showInLegend: false}}, ...}
Or you can disable stacking by setting stacking attribute to null. For example...
{..., plotOptions: { series: {..., showInLegend: false, stacking: null}}, ...}