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'
}
}
}
Related
Using HighChart, I wanted to create grouped column chart with max width, so that when there are less points on x axis the bar does not look wide.
I found some property maxPointWidth which can be applied to achieve the same. but using this there is a gap for each bar within x-point.
How to remove this gap ? I have tried pointPadding:0 as well seems this does not help
I am expecting chart something like below.
Fiddle: https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
groupPadding will help. https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
plotOptions: {
series: {
groupPadding:0.45,
maxPointWidth: 10
}
},
https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
This a sample in highcharts for what exactly i need to create. The issue i am facing is the blue color should be in the area chart series, but highchart is applying the color at the top (outside the series). I apologize if i am not able to explain the issue correctly.
This happens when i use reversed: true, in yAxis.
Please help or let me know if you need me to explain the issue in different words.
When you reverse the axis, the data reverses as well, to match.
I would probably do this by using negative values as the axis min/max, and the data points.
Then, in the axis label formatter, return the absolute value (removing the '-').
labels: {
formatter: function() {
return Math.abs(this.value);
}
}
You can use the same formatting method to fix the tool tips, data labels, and anything else that might need it.
Example:
http://jsfiddle.net/jlbriggs/MybCM/27/
Is there any way of rounding both edges of the spline chart? I am almost sure I saw it done before but can't find it in the API docs.
Now my chart looks like:
Unfortuantely this option is not avaiable, but you can try to modify i.e SVG element (series).
You can use linecap, which defaults to round in the current Highcharts version.
plotOptions: {
spline: {
linecap: 'round'
}
}
As far as I know, the only two options are round (default) and square.
Official docs: http://api.highcharts.com/highcharts#plotOptions.spline.linecap
As you can see from the attached image, my x-axis categories are getting bunched together in the middle. How can I configure highcharts to take up more of the x-axis? Note: The chart size is dynamic, it grows and shrinks based on the overall browser size and split-panels within the app. So explicit computation of the point-width is not an option (I expect highcharts to do the work for me).
Note: The picture is vertically cropped.
The chart options I'm using are:
highchart.setAnimation(false);
Legend legend = new Legend();
legend.setEnabled(false);
highchart.setLegend(legend);
highchart.getXAxis().setCategories(result.getAxisXCategories().toArray(new String[] {}));
highchart.setType(Series.Type.COLUMN);
ColumnPlotOptions options = new ColumnPlotOptions();
options.setStacking(Stacking.NORMAL);
options.setGroupPadding(0);
options.setAnimation(true);
highchart.setColumnPlotOptions(options);
In other words, legend is turned off and column plot options is set to zero group-padding.
UPDATE: Here is a JSFiddle showing the same issue
For others who run into the same issue, the solution is to set the pointRange option of the ColumnPlotOptions. In JSON this looks like:
"plotOptions": {
"column": {
"stacking": "normal",
pointRange: 1,
"groupPadding": 0
}
}
In GWT-Highcharts, you don't actually have a specific API for pointRange. Therefore set a generic option like this:
ColumnPlotOptions options = new ColumnPlotOptions();
options.setOption("pointRange", 1.0);
...
You can try to set pointWidth() http://api.highcharts.com/highcharts#plotOptions.column.pointWidth
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.