I have created a Live stock Graph Using Highcharts. I did that Zoom option using map.js, Its working good with their default buttons like "+" and "-". My question is How can i create the same Zooming Option using Outer Buttons.
My Code is
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top'
}
}
Here the link to image
https://s32.postimg.org/jyextt0rp/
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
when I drag in the chart, it triggered a zoom action, how to change it to the behavior like Google Map? drag the map, map will move, and scale the map with mouse wheel.
I found a way to do this:
download Highmaps
import highmaps/modules/map.js into html file
add mapNavigation option to the chart:
mapNavigation: {
enabled: true,
enableButtons: false
}
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/
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.