I am not able to change the position of a datalabel of a specific slice in a pie chart.
For example, if the data is :
data : [
['Apples', 29.428125119061225],
{
name: 'Oranges',
y : 70.57187488093878,
dataLabels : { distance : -90}
}
]
The above distance has no effect on the slice.
In fact, looks like the example given for above in the Highchart docs also doesn't seem to be working as intended.
Is this a known bug?
This was a known bug and as mentioned by #PawelFus, fixed in v5.0.11
Related
I'm building a chart using the highcharts javascript library
I'm expecting to get a chart like
And here's what I already have. enter link description here
enter code here
You define x values on a categorized axis and because of the default pointPlacement, your chart is distorted. You can change pointRange, but in that case, I would recommend removing axis type (the linear will be by default) and set series.pointPlacement to between
plotOptions: {
column: {
pointPlacement: "between"
}
},
The label's position can be set by xAxis.labels.x option.
Demo:
https://jsfiddle.net/BlackLabel/a4qs7dp9/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/xAxis.labels.x
How can I draw a high chart with two labels in x coordinate one is string another one is a date in highcharts
You can use the xAxis.categories feature to achieve it.
Demo: https://jsfiddle.net/BlackLabel/xj0dh8es/
xAxis: {
categories: ['test1', '04/07','05/07','06/07']
},
API: https://api.highcharts.com/highcharts/xAxis.categories
Is it possible to align the y axis tick "outside" on a highstock graph, so that it aligns with the gridline, rather than being "inside" and sat on top of the gridline. The documentation for highstock suggests that it should be placed "outside" by default, but looking at every example of a highstock graph, they always appear to be "inside".
tickPosition: String. The position of the major tick marks relative to the axis line. Can be one of inside and outside. Defaults to "outside".
Highchart example (what I want): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/
Highstock example (what I get): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/
Many thanks in advance.
Update - a solution of sorts
I came to the realisation that a Highcharts.StockChart is just a pre-configured version of Highcharts.Chart in the highstock.js file.
HighCharts.Chart has all the features of a Highcharts.StockChart - not just the features of a Highcharts.Chart in the highcharts.js file.
As a result, I have just used a highstock.js Highcharts.Chart with the configuration I require, and this places the yAxis labels in the correct position.
You can use offset parameter for yAxis.
http://api.highcharts.com/highstock#yAxis.offset
EDIT:
http://jsfiddle.net/Z4zwr/1/
yAxis : {
labels:{
align:'right',
x:-10
},
lineWidth : 1,
offset : 30
},
I've found a solution (jsfiddle): Add labels: { align: 'left' } to your yAxis options, like so:
yAxis: [{
labels: {
align: 'left'
}
}]
This tells Highcharts to align the left end of the labels with the y-axis.
Updated jsfiddle: http://jsfiddle.net/r4wrf63u/
In chart, the x-axis labels are overlapping, when chart data is big.
I have used "step" property as follows :
xAxis: {
labels:{
step: (stepVal ? stepVal : 0),
},
}
I calculate the value of stepVal, depending upon data.
This resolves the issue of overlapping labels on x-axis.
But, when I zoom the chart, I want to see all the labels on x-axis.
How to get it?
In Highcharts 3.0 you can use
chart.xAxis[0].update({
labels: {
step: newValue
}
}
for updating step. Just setting new value in options for new chart won't work.
I believe what you are looking for is this..
http://api.highcharts.com/highcharts#chart.events.selection
You would need to change the xAxis labels steps in the event of a zoom action. You will need to determine how many labels you would want to show, based on how many labels are visible as a result of the zoom.
My chart is ugly and I'm not sure what to do about it. It's ugly because the labels overlap and are barely readable. Ideas I've already considered:
Hide labels for small slices. This has the obvious negative of less information visible, especially when the page is printed. Our users print a lot.
Alternate big slices and little slices. Not ideal as it reduces the organization of the information and may suffer occasionally from the same issue.
Manually place each label with fixed positions. Expensive solution with regards to implementation time and code maintenance.
Anyone have a better idea? I wish highcharts was able to detect overlap and do something about it automatically. Here's the pic:
There is a new option in Highcharts to set the startAngle of the pie chart. You can use the startAngle to arrange all the small slices on the right side of the chart, allowing more of the labels to fit.
series: [{
startAngle: 90
}]
JSFiddle demo here: http://jsfiddle.net/highcharts/dK9CD/
I found a highcharts forum topic related to rotating the pie chart to better distribute labels in this sort of case, but it involves modifying the source to find the following line and change the cumulative reference to zero:
cumulative = -0.25, // start at top
One option that is not optimal but might work is to rotate the data labels a few degrees so that they don't overlap, like so:
{
plotOptions : {
pie : {
dataLabels : {
rotation : 15
}
}
}
}
I also come across the same issue. I fixed the issue with below code.
plotOptions : {
pie : {
dataLabels : {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
}
}