I have a pie chart located:
http://jsfiddle.net/PcX4b/5/
I am setting the series to look something like:
series: [{
type: 'pie',
name: name,
size: '100%',
innerSize: '25%',
data: innerData,
shadow: true,
dataLabels: {
enabled: false
}
}, {
type: 'pie',
name: "whiteBorder",
size: '100%',
innerSize: '93%',
data: outerData,
shadow: false,
dataLabels: {
enabled: false
}
}]
Right now the shadow for the pie chart is displaying on the outside of the pie (desired) and the donut hole (not desired). Is it possible to have it display only on the outside with out putting it on the white border series.
Just remove/set to 0 innerSize for a first series, see: http://jsfiddle.net/PcX4b/8/
Related
I have attached the screenshot to show the dash line in left side of the chart. It would be helpful if we can achieve the functionality and I tried to increase the width of the border, it is visible slightly. Do you have any proper approach to achieve this?
Code Snippet :
Highcharts.chart('container', {
chart: {
type: 'bar',
charWidth: 520,
chartHeight:300,
margin: [70,0,0,0]
},
xAxis: {
categories: ['Jan'],
visible: false
},
yAxis: {
min: 0,
visible: false
},
plotOptions: {
series:{
stacking:'normal'
},
dataLabels: {
enabled : false,
}
},
series: [{
name: 'John',
data: [{
y: 15
}]
}, {
name: 'Jane',
data: [{
y: 22
}]
}, {
name: 'Joe',
data: [{
y: 33,
}]
}, {
stacking: false,
data: [55],
grouping: false,
dashStyle:'ShortDash',
color: 'transparent',
borderWidth: 2,
borderColor: 'red',
}]
});
Thanks for the response
[![enter image description here][2]][2]
The left side of the bar is connected to the xAxis, which makes the left border less visible. There are some possible solutions to this issue.
You can set the minimum value of the xAxis to -0.1 and set startOnTick property to false. Then the left border is visible (it's not directly connected to the axis).
Demo:
https://jsfiddle.net/BlackLabel/pqy84hvs/
API references:
https://api.highcharts.com/highcharts/xAxis.startOnTick
https://api.highcharts.com/highcharts/xAxis.min
yAxis: {
min: -0.1,
visible: false,
startOnTick: false
}
You can set the borderWidth property to 3. Then the border is visible.
Demo:
https://jsfiddle.net/BlackLabel/01m6p47f/
API references:
https://api.highcharts.com/highcharts/series.bar.borderWidth
{
name: 'Joe',
borderWidth: 3,
borderColor: 'red',
data: [{
y: 33,
}]
}
You can also use SVG Renderer and render the border yourself.
Docs:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Example demo of using SVG Renderer:
https://jsfiddle.net/BlackLabel/2koczuq0/
In short, I need to somehow enable groupPadding for stacked series. It looks a little bit odd, but this is what you can do in PowerPoint if you set series overlap to 0:
With series overlap set to 100, they would be on top of each other like in Highcharts with stacking set to e.g. normal.
To me, it seems you are not allowed to move stacking columns horizontally relative to each other in Highcharts. But maybe I am missing something or there is a workaround?
Thanks!
You can create an additional hidden series with the same stack as the upper series. Example:
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0,
dataLabels: {
enabled: true,
format: '{point.y}%'
}
}
},
series: [{
data: data2,
color: 'gray'
}, {
data: data1,
color: 'rgba(0,0,0,0)',
linkedTo: 'data1',
dataLabels: {
enabled: false
}
}, {
id: 'data1',
data: data1,
stack: 'A',
color: 'green'
}]
});
Live demo: http://jsfiddle.net/BlackLabel/rkvs8cy7/
API Reference: https://api.highcharts.com/highcharts/series.column.stack
My pie chart slice is too narrow to one another i would like to create a distance gap between slice. What is the command to do that
The parameter you may use is slicedOffset, it will give you a chance to slice your point.
series: [{
type: 'pie',
name: 'Browser share',
slicedOffset: 30,
borderColor: 'white',
data: [
['Firefox', 75.0], {
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}
]
}]
Here you can see an example how it can work: http://jsfiddle.net/t8cqev0r/2/
You can also use edgeColor and edgeWidth for getting your pie points separated:
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
edgeWidth: 5,
edgeColor: 'white'
}
},
Here you can see an example: http://jsfiddle.net/t8cqev0r/3/
The data labels when using 3d Pie Chart displays in an incorrect manner.
I only have two slices and most of the times, the labels of one slice ends up being in the space of other slice. See http://jsfiddle.net/tn036sak/
I do want to use the distance property so it does not show labels outside of the pie chart.
This is my code -
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 65,
beta: 0
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
distance:-40,
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 10.0],
['Chrome', 90]
]
}]
});
});
Please suggest how the labels can be shown on the respective slice.
Is it possible to make an arearange series like the following? :
I saw the option to set oppacity, but that will give the series like the following:
Is there a way to hide the top line or to set the opacity of top line only?
You can set only lineWidth for whole area-range series. Instead you can disable that line, and use separate series: http://jsfiddle.net/9agdf5ar/
series: [{
name: 'Temperature',
data: averages,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
dataLabels: {
enabled: true
},
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}]