I really want to know how to make datalabels always in center of each slice in pie chart.
The normal state look like this(you can also see this example here)
$('#container').highcharts({
chart: {
type: 'pie'
},
plotOptions: {
pie: {
center: ["50%", "50%"],
dataLabels: {
distance: -50
}
},
series:{
events:{
load:function(){
console.log(this.chartWidth, this.chartHeight);
}
}
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
But, when I decrease the width or height of this chart, datalabels combined, which look like the image below. I think it is the problem of distance property. I've tried to change distance dynamically but failed.
As a result, what I want to do is to locate datalabels always in center of the each slice even decreasing/increasing chart size.
This is a tough one. From my experiences, there's not (currently) a way to explicitly center the labels directly in the middle of each pie slice. I've tried positioning the labels as you did in your example with the same (unsatisfactory) results, especially in smaller browser windows.
I'd recommend either using a legend to show the categories/types in your pie or consider using a stacked bar chart instead (see http://www.highcharts.com/demo/bar-stacked).
I hope this is helpful!
Related
I am working with Highcharts Bar Graph (vertical) and I would like to have the Members data to appear on top of each bar (hovers we will keep as well which is working). I've tried various ways with plotOptions and could not get this to work to show Members data on top of the bar graph view. The first link is my working code.
**https://codepen.io/jenfloods/pen/jOyXEQd**
The second link above is the example is how I would like the data text to appear on top of a bar graph with white shadow letters but this would apply to my vertical bars and not horizontal as this example shows.
**https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/bar-datalabels-align-inside-bar/**
Anyone has an example or can work with my code to make it happen?
You need to enable data labels for series and use the configuration like below:
plotOptions: {
series: {
...,
dataLabels: {
rotation: 90,
verticalAlign: 'top',
y: 10,
align: 'left',
inside: true,
enabled: true,
color: '#FFFFFF'
},
}
}
Live demo: http://jsfiddle.net/BlackLabel/y04j6z3m/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.dataLabels
I found this weird behavior when I tried to apply individual colors to a column chart in a candlestick chart in highstocks.js.
I made a JSFiddle example, but all I changed from the original candlestick example was the values for the column (volume) chart from:
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
to:
volume.push({
'x': data[i][0],
'y': data[i][5],
'color': 'green'
});
So when I change the number of bars I push into ohlc and volume from 54 to 55 (instead of dataLength) the colors are suddenly not applied anymore.
Try for your self, with a 'small' number of bars (<55 for me) the green color is applied just fine, but for a larger number of bars (>=55 for me) the volume bars are black and not green.
How can I avoid this? I want the colors to apply regardless how many bars I am plotting of course.
(This is just a simple toy example, in my real application the number of bars are far greater and colored depending on rules.)
I found an answer on the Highcharts forum. I need to disable the dataGrouping to make it work. Adding the column series as :
{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits,
enabled: false
}
}
will make it all work. I see the volume bars don't plot at all for large timeseries though...
I am loading a column chart in 3D with Highcharts. On the inital load, the chart works perfectly. When I use setData() to change the series, the chart gains an odd white outline around its edges.
Before:
After:
I tried a few fixes such as using edgeColor and edgeWidth, although they made no difference.
Note: If I hover over one of the columns, the outline is instantly removed on that particular item until setData() occurs again.
How can I remove this white outline from the chart?
edgeWidth should be working, however there is a bug. Reported here - thanks.
As workaround, set edgeColor: 'rgba(0,0,0,0). Demo: jsfiddle.net/hdghyz2x
Bug is fixed already by commit (4c94d34) - will be included in next release (4.1.5). Available already in github version: http://github.highcharts.com/highcharts-3d.js
like this
$('#container').highcharts({
chart: {
type: 'bar',
},
title: {
text: 'Pie without borders'
},
series: [{
borderWidth: 0,
}]
});
});
http://jsfiddle.net/XPK3f/
I am looking to add the wedges of Pending Issued Closed actually on the wedges.
I believe the changes need to be made in one of these objects.
seriesDefaults:
labels:
visible: true,
template: "${value} ${category}",
series:
type: "pie",
data: dataSet
Here is an example of how the series will have labels in the actual chart and not just on the legend. Please see the JSFIDDLE for details.
Thanks!
pie chart http://www-958.ibm.com/software/data/cognos/manyeyes/images/pie-chart.gif?1292295884
I'm not 100% sure what you are asking, but yes, using a template inside the series-defaults labels, you can put pretty much whatever you need as the label.
seriesDefaults: {
labels: {
visible: true,
template: "${category} - ${value} clients"
}
}
http://jsfiddle.net/XPK3f/2/
I need only replicate the value of Y axes on both sides os the axis. Note that my chart DOES NOT have multiple axes.
Look the example: [http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/]
I know it's something simple, but I could not find the solution.
Please guide me. Thanks in advance.
You still need to specify multiple axes, and then you can use the 'linkedTo' and 'opposite' properties:
yAxis: [{
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},{
linkedTo:0,
opposite:true
}],
.
Edit for clarification based on comment below:
Highstock, at the time of this writing, sets the opposite property as true for the yAxis by default.
However, Highstock is not a "version of Highcharts".
Highstock is its own product, originating from and related to Highcharts.
All versions of Highcharts currently set opposite to false both axes by default - yAxis will be on the left, and xAxis will be on the bottom.