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)'
}]
Related
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.
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
},
}],
I am trying to use "solidgauge" chart from highcharts in backboneJS. Previously I had used a VU meter and it was working correctly. When I used solid gauge I am getting highcharts#17 error. As per this error either I am giving series.type or chart.type wrong else I don't have the necessary extension files. I have loaded the "highcharts.js", "highcharts-more.js", "highcharts-3d.js" and "exporting.js" files and the sibling VU meter worked.So i think there is something wrong with my chart options but can't seem to figure out what that is.Here is my chart configuration and I am giving the data for the series dynamically.I am using coffeescript.
scoreCard :
chart:
type: 'solidgauge'
title: null
pane:
center: ['50%', '85%']
size: '140%'
startAngle: -90
endAngle: 90
background:
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE'
innerRadius: '60%'
outerRadius: '100%'
shape: 'arc'
tooltip:
enabled: false
yAxis:
min: 0
max: 100
stops: [
[10, '#55BF3B']
[60, '#DDDF0D']
[90, '#DF5353']
]
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title:
y: -70
labels:
y: 16
plotOptions:
solidgauge:
dataLabels:
y: 5
borderWidth: 0
useHTML: true
credits:
enabled: false
series: [
{
name: "Pulse value"
}
]
I cant seem to figure out whether the fault is because of the chart configuration or any missing header file. Can anyone please help?
The solidgauge type has its own module that needs to be included, it's not part of the highcharts-more.js file.
As seen in the demo for the solidgauge chart:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/
Files and reference:
https://code.highcharts.com/modules/solid-gauge.js
https://code.highcharts.com/
I got the same problem.
I fixed adding the following statements
import * as ChartModuleMore from 'highcharts/highcharts-more.js';
import HCSoldGauge from 'highcharts/modules/solid-gauge';
import Highcharts from 'highcharts'
ChartModuleMore(Highcharts);
HCSoldGauge(Highcharts);
Don't forget to add the files references:
<script src="../node_modules/highcharts/highcharts.js"></script>
<script src="../node_modules/highcharts/highcharts-more.js"></script>
<script src="../node_modules/highcharts/modules/solid-gauge.js"></script>
I want to change color on yAxis in 3d chart, for example this:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-scatter-draggable/
if I add, in the Yaxis this:
lineColor: '#ff0000'
but the color doesn't change. Why?
You should change the color of side in options3d.frame to change the yAxis color:
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(255,0,0,0.15)' }
}
Then you could use alternateGridColor to have two colors and also play with the opacity of bottom, back and side. Here's the DEMO
EDIT:
You can also use plotBands like this:
plotBands: [{
color: '#FCFFC5',
from: 0,
to: 2.5
}]
DEMO
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.