I've got a HighChart bar chart with a whole ton of options, and it works perfectly except for one minor issue. According to all the documentation I've found, if I have a plotOptions of :
{
cursor: "pointer",
column:{
dataLabels: {
color: "#4572A7",
enabled: true,
style: {"fontWeight":"bold"}
},
inside: false,
point:{"events":{}},
stacking: 'normal',
}
}
I should get a caption above each bar in my bar chart. However, instead of appearing above each bar, these captions are being rendered in the center of the bar. I'm sure I'm just missing one key option or something, but I haven't been able to figure out what that option is ... do any HighCharts experts out there happen to know?
It turned out that the option I was missing was verticalAlign; when I added that to my dataLabels options (with a value of "top") it fixed things ... well mostly. I also had to add a y option of "-10" to actually get the labels to be above the bar.
The funny thing is, I have the code for an old version of the chart, and it didn't have a verticalAlign option at all, but it showed its labels above the bar. I guess some other option that I'm using in my version made the verticalAlign necessary.
In any case, I'm leaving this self-conversation behind in case someone else runs in to this same problem.
Related
https://www.highcharts.com/demo/column-stacked
Highcharts is a JS API that allows you to easily generate bar charts. The above link shows a Highchart stacked column table. The bars show some information in a tooltip when you hover on them. Highchart allows us to control the delay of the tooltip with this JS parameter hideDelay: number but there is no such parameter to hold the tooltip when you hover on it.
What I want is to make the tooltip stay even when I hover on it. Tooltip only stays when I hover on the bars and disappears a few minutes after I take my cursor away from the bar.
Set plotOptions.series.column.stickyTracking to true.
plotOptions: {
column: {
stacking: 'normal',
stickyTracking: true
}
},
jsFiddle
API Reference: https://api.highcharts.com/highcharts/series.column.stickyTracking
I want hide tooltip and crosshair when screen resize but when I call method
this.chart.tooltip.hide();
Only tooltip hide , I dont see any method help hide crosshair.
After some fiddling around I found out that this works (for a button):
$('button').click(function() {
chart.update({tooltip: {enabled: false}, xAxis: {crosshair: false}}, true);
})
This disables the tooltip, and at the same time disables crosshair.
Note that setting tooltip: {crosshairs: false} in the update function will not do anything. Ref: tooltip.crosshairs.
crosshairs: Mixed
Since 4.1, the crosshair definitions are moved to the Axis object in order for a better separation from the tooltip. See xAxis.crosshair.
Working example: http://jsfiddle.net/q04df7wy/12/
Highcharts paints the chart as the page loads. For example when a simple bar chart is loaded, columns are painted on progressively.
Is there a way to disable this? I just want to chart as it is. No movements. I tried to set animation to false. But it does not work.
Jake He
The initial animation is hidden under a different "animation" option:
plotOptions: {
series: {
animation: false
}
},
Here's a JSFiddle using that option: http://jsfiddle.net/troygizzi/3w7noceq/
It was based on this one: http://jsfiddle.net/highcharts/VqruM/
Does anyone know the setting in highcharts (I've looked through the API but I can't seem to find it - maybe looking in the wrong place?) where I can disable the chart's ability to resize when I click on a legend item?
http://api.highcharts.com/highcharts#legend
If there are two lines on the graph, and toggle off one of them on the legend, the graph resizes to show the one line full sized. I want to prevent this functionality.
There actually is a simple solution to this provided for by the API:
chart: {
ignoreHiddenSeries: false
}
I'm pretty sure this is the behavior you desire.
Is this possible? I want the other slices in the pie chart to adjust to a full circle when one is disabled in the legend, rather than just making an empty slice..
If you change the behavior of the legendItemClick event handler you can remove the sector instead of hiding it.
pie: {
point: {
events: {
legendItemClick: function (eventArgs) {
this.remove(); // Remove the point
eventArgs.preventDefault(); // Prevent the default behavior
}
}
},
showInLegend: true
}
This will only get you half the way though. The problem is that you cannot get the point back since it will be removed from the legend as well.
A way to get around this would be to add a reset button that brings back the original data set with series.setData(). See this jsfiddle example.