I have a question about highchart's overlapping data labels. I have 2 spline data series and as you can see here http://jsfiddle.net/3E8V4/ some data labels are overlapping.
Question here is: is this overlapping even possible to prevent? If yes - how should I do it?
Code for plotoptions is like that:
plotOptions: {
spline: {
dataLabels: {
enabled: 'True',
crop: false,
overflow: 'none'
},
enableMouseTracking: false
}
},
You can use that plugin for repositioning dataLabels: http://jsfiddle.net/menXU/1/ It's not perfect, since works only for max 2 series and requires disabled animations, or you will see little delay when repositioning dataLabels.
How to use? Copy StaggerDataLabels and isLabelOnLabel functions, and then use StaggerDataLabels in load and redraw events for chart.
Sobis,
I don't have a answer that is exactly what you are expecting.
In this case what i would do is increase the max of yAxis by 10% of the maxi m of the data.
provide zoom in/out. that will enable the user to get a values on top of the points
zoomType: 'xy'
here is an example http://jsfiddle.net/3E8V4/1/
hope you will find it useful
Related
HIGH CHARTS
In addition to this question, I would like to ask another question here in this thread.
How to add extra tears(ticks), in such a way, the green bar dataLabel, does stay inside plotting area, rather, going out of plotting area or made hidden. JSFIDDLE
There are lots of ways to do this. But quickest one is adding a max value to yAxis with using yAxis.max.
yAxis: {
allowDecimals: false,
max: 6000
},
Here is the working example: jsFiddle.
OR
You can use the combination of yAxis.tickAmount and yAxis.tickInterval like this;
yAxis: {
allowDecimals: false,
tickAmount: 10,
tickInterval: 1000
},
Here is the working example: jsFiddle.
Besides setting a new max property or trying a different combination of ticks, you can simply set overflow property with 'none' value and crop with false. This way you can display data labels outside the plot area.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
Example:
http://jsfiddle.net/2qtpx0rL/
I need to keep my chart under specific X and Y axis delimitation but I also need to allow overflow of my bubbles in my bubble chart. I noticed that hovering the bubble make it overflow, isn't it possible to force it permanently in some ways?
There is no default option to set minimum range without setting min or max. It is possible to set min/max to axes is chart's callback when default axis extremes are not small (min) or big (max) enough, but for bubble chart it might cause bubble to be partially cut (not fully visible).
You could add hidden scatter series that will hold min/max by its points, so if bubbles are on the edge chart will adjust itself to fit them.
Example: http://jsfiddle.net/bp54a36z/16/
{
type: 'scatter',
showInLegend: false,
enableMouseTracking: false,
dataLabels: {
enabled: false
},
data: [[0.1,40],[10,-40]],
marker: {
enabled: false
}
}
Is there a programmatic way to provide axis labels for individual bars in a grouped bar chart in HighCharts?
Use case: The use case is when dealing with a graph that is both grouped and stacked. With these graphs it is hard to visually convey (without a tooltip) what the individual bars represent, unless they have individual labels.
Default behavior:
As an example see the HC demo for a stacked and grouped column graph, in which it might initially be unclear that the individual bars in each cluster represent different genders: http://www.highcharts.com/demo/column-stacked-and-grouped
Goal: Here is an illustration of what I am trying to achieve. Is it possible to do this programmatically, such as with a second x-axis? Perhaps another idea would be to use clever placement of the stack total, but of course that would get in the way of showing the actual stack total.
There are a few options which may help you.
Firstly, the stackLabels formatter allows you to determine what is in you label.
Secondly, veticalAlign:"bottom" allows you to position the labels at the bottom of the stack.
Thirdly, the 'y' option allows you to move the label relative to its default position.
The catch is that you can't seem to move the label outside of the chart plot area. One way round this is to start your y-axis at a negative value to give room for the labels. You can then move the position of the x-axis into the chart area.
http://jsfiddle.net/WY6QB/
xAxis: {
offset:-43,
labels:{
y:40
},
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
stackLabels: {
verticalAlign:"bottom",
y:20,
enabled: true,
formatter: function() {
return this.stack;
}
}
The only thing left is to try to remove the spurious '-2' y axis point.
-EDIT-
If you set startOnTick to false, and give the y-axis min as -1.9, the spurious -2 point goes away.
min: -1.9,
startOnTick:false,
http://jsfiddle.net/V6Cp2/
It is not exactly the same result as your image, but it displays the stackLabels:
yAxis: {
...
stackLabels: {
enabled: true,
formatter: function() {
return this.stack;
}
}
},
It displays the label at the top of the column.
Example
You can use grouping categories plugin.
I am trying to increase the space between charts in this link however i have used minPadding/maxPadding in xAxis and pointWidth: 90/pointPadding: 0 but nothing works. It seems to me that there is forced spacing at the top and bottom of the chart area which is causing this.
http://jsfiddle.net/j7NMC/2/
/*What i have tried */
series:{
pointWidth: 90,
pointPadding: 0
}
xAxis: {minPadding:0, maxPadding:0,}
Any ideas?
Thank you :)
I would suggest changing your data setup. Instead of 3 different series, use 1 series and 3 categories:
series: [{
data: [973,133,107]
}]
example: http://jsfiddle.net/j7NMC/4/
What this does for you:
1) eliminates that wasted space on the chart
2) eliminates need for legend by putting the labels right on the axis next to the bar (drastically improves usability of chart, makes comprehension much easier for user)
3) eliminates need for multiple colors for the bars (drastically improves usability of chart, makes comprehension much easier for user)
EDIT:{
you can try setting the groupPadding to 0 to remove some of the space, as the the 3 series you have displayed are grouped, and extra space is being added because of that.
The options need to be in the 'bar' section of plotOptions, and you don't need a series entry in plotOptions i.e. like this:
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
pointWidth: 10,
pointPadding: 0
}
},
http://jsfiddle.net/A8dpf/
I'm trying to create a column chart (Highcharts) with a fixed width (range) for all the columns. I have around 300 columns, and I want to draw them actually as lines, and that's why I assign a very small range (0.001) for each of them.
The data format is basically like this: [numberId, min, max].
However, sometimes the height is shown correctly... but some other times it appears with strange height, not even the same for all the columns. I have tried many different things but I didn't manage to find the problem.
This is the jfiddle http://jsfiddle.net/deSSf/3/ (if you resize the area for the chart you will probably see the effect). The fiddle is actually using HighStock, but this chart should be from highcharts lib.
I have screenshos but can't post them.
The code is very simple:
chart: {
renderTo: 'container',
type: 'columnrange',
},
series: [{
data: [[1,0,0.001],......]]
}
There is huge difference between Highcharts and Highstock. In Highstock you have access to dataGrouping which collects data and groups when there is to many points to display on a chart.
Disable it to have working example: http://jsfiddle.net/deSSf/4/
dataGrouping: {
enabled: false
}