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
}
}
Related
Is it possible in HighchartsJS to set the starting position for negative values, for example 200. So that the chart less than 200 is drawn down. By default position starts from zero.
To change a base level, use series.threshold property.
Example:
plotOptions: {
series: {
threshold: 100
}
},
Demo:
https://jsfiddle.net/BlackLabel/3c9tngod/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.threshold
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
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.
With Highcharts 3.0 it is possible to create charts with type 'bubble', whereas prior to 3.0 it was necessary to use a 'scatter' chart and modify marker size to make bubble charts. The nice thing about the old way is you had complete control over the visible pixel radius of each bubble--the new bubble charts automatically resize the bubbles so they are sized relative to each other. Is there any way to turn off this behavior or set bubble radius manually?
I am having a hard time seeing how a bubble chart, where the bubbles are not sized relative to each other, would be of any use.
You should be able to use the minSize and maxSize options, however, to control them the way that you need to:
bubble: {
minSize:2,
maxSize:50
}
{{edit:
I don't see them in the docs either, actually. But you can see an example here: http://jsfiddle.net/fXzke/13/ use either number as pixel value, or string with percent of chart height
}}
I found that adding an "empty" bubble to the series helps keep the size of all bubbles in the chart relative to each other:
name: '',
data: [{x:0,y:0,z:0}],
showInLegend: false,
color: 'transparent',
enableMouseTracking: false
Here's a sample on JSFiddle: http://jsfiddle.net/9bebT/2/. The legend, color, and mouse tracking variables each help keep the item in the series but otherwise invisible to the user. If you simply remove the empty bubble or set its visibility to "false," the chart doesn't register the empty bubble's z axis (diameter) as the minSize.
I have a time series chart in Highcharts where I would like users to be able to zoom in on specific date ranges. This is possible by setting zoomType: 'x'. However, once the chart is zoomed, the Y-axis does not rescale to best fit the visible data. For instance, if the original Y-axis runs from 0 to 100, and I zoom on an area with data that only runs 91 to 99, then I probably want the Y-axis to change to be 90 to 100 or something similar. Basically, I want figure out how to get Highcharts to re-run its axis-scaling logic considering only the visible data.
A halfway measure is to set zoomType: 'xy' which allows the user to draw a rectangle and zoom on that rectangle. However, this is inconvenient for the user in this context, as all they really want to be able to do is isolate a date range and then study the variation in the data in that range.
If you want to stick to highchart.js and not using highstock.js (as contrary to what they were suggesting here: http://highslide.com/forum/viewtopic.php?f=9&t=13983), you can do the following with your y axis:
yAxis: {
title: {
text: 'Number of appartements'
},
min: null, // Will for min and max to adjust when you zoom
max: null, //
startOnTick: false,
minTickInterval: 1,
showFirstLabel: false
},
It works just fine for me,
Quentin