I have a simple chart with six data objects, three lines and three bubbles. Each line shares the name with its corresponding bubble. How can I join each pair so that I can have an onClick event on either series to make them disappear?
I'm also not sure why disabling the legend is overriden:
plotOptions: {
showLegend: false
}
JSfiddle
Have you seen this question? Maybe it can be useful to you.
But for hiding the legend I didn't find the showLegend property. To hide the legend there is a property of legend - enabled:
legend: {
enabled: false
}
Related
I have a chart that has been designed that I'm working on and I have a few questions.
First, can I remove the grid lines etc. from the grid and just show a stacked bar graph with no axis/ticks etc.
Here's a link to the designed graph: UI of simple stacked bar chart
Thanks!
You can simply hide both axes to achieve the desired result:
yAxis: {
visible: false
},
xAxis: {
visible: false
},
Live demo: http://jsfiddle.net/BlackLabel/gspgunzj/
API reference: https://api.highcharts.com/highcharts/xAxis.visible
HighCharts: Tooltip is not visible in Bar chart for very small value
e.g.
If we have 2 columns, one has value 5000 and another has 1 then we are not able to see the bar for value 1 and tooltip for corresponding value is also not visible. Is there any provision to show the toolptip for all columns in Bar chart irrespective of column values?
If it works for your case, you can use a shared tooltip. This will display a tooltip whenever your mouse is in the column/bar area but will have all series values in the tooltip.
tooltip: {
shared: true,
},
API: https://api.highcharts.com/highcharts/tooltip.shared
Example: http://jsfiddle.net/5gu8mor7/
you need to set the minPointLength to see the small values
plotOptions: {
column: {
minPointLength: 10
}
}
you can set set it to smaller values, if you want those bars smaller
here is a full fiddle with how it works http://jsfiddle.net/tru0psqL/
Is it possible to add an item to the Highcharts legend?
I have added a custom marker at a specific point in my line chart and would like to explain to the user what this marker indicates, so ideally I would add this as an additional item to the legend area.
The easiest way is to add that custom marker as a separate series, instead of within the original series.
{
name: 'Special Point',
marker: { enabled: true },
data: [[4,9]]
}
Example:
http://jsfiddle.net/jlbriggs/3d3fuhbb/123/
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.
On hiding both the series using legends, and then clicking one of the series shows xAxis starting from '-1', when ideally it should show only not null categories.
Using 'ignoreHiddenSeries: false' solves the purpose but again on hiding both the series using legend and then enabling other series tends to overlap both the series. Although on window resize event, series get aligned properly.
chart: {
type: 'column'
// ignoreHiddenSeries: false
},
Example for reference: http://jsfiddle.net/t88rc/
You can simply set for xAxis min:0, see: http://jsfiddle.net/t88rc/2/
Grouped column charts work best with equal number of data points per series.
Best solution I have found for this is to fill any missing data points with null values:
http://jsfiddle.net/jlbriggs/t88rc/1/
data: [49.9, 71.5,null,null,null,null,null,null]