Highchart pie chart colors are not changing - highcharts

I'm trying to create a pie chart with custom colors. My legend colors update just fine but the pie itself is not changing its colors. I've tried many different ways like setOptions:
Highcharts.setOptions({
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Or change color for each pie separately in series:
series: [{
type: 'pie',
keys: ['name', 'y', 'color'],
data: [
{ name: "KPI", y: 60, color: '#f3c200' },
{ name: "-KPI", y: 0, color: '#e87e04' },
{ name: "Remains", y: 40, color: '#e2000f' }
],
size: '60%',
innerSize: '40%',
showInLegend: true,
dataLabels: {
enabled: false
}
}]
And other methods too, but the output is always the same, legend color changed, pie colors did not. When I test my code in a fiddle it works just fine, so it's a local issue, but I do not see where, because every piece of code is the same. So I'm not sure is it a bug, missing package, or imported styles. Please advise if you faced this issue.
Here's my code in a fiddle:
"http://jsfiddle.net/vnfkw9ds/"
In this post, Rohitesh in the comments had the same issue, but it was never resolved:
https://stackoverflow.com/a/10074739/11745912


Ok, looks like if you add highcharts.css to you styles you cannot do any color modifications for some reason. Could not find an answer for two days, but after posting it here, the answer found me.

Related

Position events below analog area in Highcharts combined line/timeline chart

I have created a combined line/timeline chart in this jsfiddle:
// arbitrary code snippet required by stackoverflow editor:
xAxis: [{
type: 'datetime'
}, {
type: 'linear'
}],
I would prefer the events to be positioned below the analog value grid rather than as currently, in the middle of it.
Is there any way to achieve this? Thanks in advance!

I can suggest two solutions:
add a second yAxis and set heights for both y-axes:
yAxis: [{
height: '50%'
}, {
height: '50%',
top: '50%'
}],
Demo: http://jsfiddle.net/BlackLabel/e0zhmyr7/
API: https://api.highcharts.com/highcharts/yAxis.height
change the y values for x-range series in the current implementation
Demo: http://jsfiddle.net/BlackLabel/ow1357tq/

Is this possible with Highchart

I have a chart with two combine chart types, line and column. I would like, as in the image below, to have my column chart at the bottom and my line chart a bit higher up and the line chart label to start hihger up as well.
I want something like:
yAxis: labels{y: -100}
My problem with this is that this only moves the labels, not the chart data.
My try so far can be found here: http://jsfiddle.net/32r7rctt/2/

It is possible to set 'height' and 'top' properties of the yAxis. Example: https://jsfiddle.net/mtvy24rj/1/
yAxis: [{
height: '70%',
top: '0%'
}, {
title: {
text: null
},
height: '30%',
top: '70%',
labels: {
enabled: false
},
}],

Opacity Highcharts pie chart IE8

I want to add different opacity to each slice in a pie chart. It has to work in IE8. The most examples I find is using rgba, but since that does not work in IE8, the only way I can think of doing this is adding a css class to each slice. Is there any other way to do this, and if not, how can I add a css class to each slice?

The example seems to working fine.
IE8 8.0.6001.18702
data: [{
name: 'Firefox',
y: 45.0,
color: 'rgba(200,122,200,1)'
}, {
name: 'IE',
y: 26.8,
color: 'rgba(200,122,200,0.7)'
}, {
name: 'Chrome',
y: 12.8,
color: 'rgba(200,122,200,0.4)'
}]

How to remove white space around HighChart

I have got problem. Around my 3D Pie Highchart, there is white space, but i have got Background, set by HTML, and i want to see it. So please how do I remove it?

Add backgroundColor: 'transparent',
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
},
backgroundColor: 'transparent',
},
...
DEMO

set margin to 0
margin: [0,0,0,0]
here is a jsfiddle link for that
I hope this is the space you are looking to remove.

How do you change the colour of each category within a highcharts column chart?

I have have a column chart which has a number of categories, each with a single data point (e.g. like this one). Is it possible to change the colour of the bar for each category? i.e. so each bar would have its own unique colour rather than all being blue?

You can also set the color individually for each point/bar if you change the data array to be configuration objects instead of numbers.
data: [
{y: 34.4, color: 'red'}, // this point is red
21.8, // default blue
{y: 20.1, color: '#aaff99'}, // this will be greenish
20] // default blue
Example on jsfiddle

Also you can set option:
{plotOptions: {column: {colorByPoint: true}}}
for more information read docs

Add which colors you want to colors and then set colorByPoint to true.
colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'
],
plotOptions: {
column: {
colorByPoint: true
}
}
demo
Reference:
http://api.highcharts.com/highstock#colors
http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint

Yes, here is an example in jsfiddle: http://jsfiddle.net/bfQeJ/
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
The example is a pie chart but you can just fill the series with all the colors to your heart's content =)

You can add colors array in high chart graph for changing the color of graph. You can re-arrange these colors and you can also specify your own colors.
$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},

Like mentioned by antonversal, reading the colors and using the colors option when creating the chart object works.
var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']});

just put chart
$('#container').highcharts({
colors: ['#31BFA2'], // change color here
chart: {
type: 'column'
}, .... Continue chart

Just add this...or you can change the colors as per your demand.
Highcharts.setOptions({
colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
plotOptions: {
column: {
colorByPoint: true
}
}
});

add properties:
colors: ['Red', 'Bule', 'Yellow']

This worked for me. Its tedious to set all the colour options for a series, especially if it's dynamic
plotOptions: {
column: {
colorByPoint: true
}
}

{plotOptions: {bar: {colorByPoint: true}}}

Resources