Select default view on charts as 1month rather than all - highcharts

How can one set the default view of time-series chart as 1month rather than appearing all by default?
Many thanks

You need to use the selected property:
rangeSelector: {
selected: 0
}
Live demo: https://jsfiddle.net/BlackLabel/gqdrh7se/
API Reference: https://api.highcharts.com/highstock/rangeSelector.selected

Related

Callouts at specific points in Highcharts

We use highcharts to display different types of data. It all works fine.
Now, our goal is to add a call out functionality.
The callouts should be added to very specific instances wherever the hikes in the points are found.
I saw this example
Adding call outs to a Highcharts - Stacked Bar
but this adds callouts for all the points. As per my use case, I need add callouts only for John as per the above example.
You can use Pawel's solution from similar topic: Adding call outs to a Highcharts - Stacked Bar
You can add if statement inside your dataLabels formatter to check if your dataLabel is connected with specific series. Then you can show the callout or remove label, depending on the series name.
formatter: function() {
return this.series.name === 'John' ? '<div class="callout top" data-name="Jane">Callout for John!</div>' : false;
}
Here you can find an example how it can work: http://jsfiddle.net/5joufkwa/30/

highcharts disable motion - set fixed chart

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/

disable legend resizing of chart

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.

How can I prevent tooltip to appears when I hover another element?

I'm developing a chart that have 2 splines and 2 scatter. I use the default tooltip formatter to exhib a tooltip based in the spline data. But when I hover a scatter despite I hide the default tooltip, before show the scatter one, it appears to have triggered again.
How can I prevent the default tooltip to be triggered?
ps: im using Highcharts 3.0.1
EDITED: I tried "chartObj.tooltip.enabled = false" but it didn't work.
If you don't want to show the tooltip for a particular serie in the chart, see if setting
enableMouseTracking: false
on you desired serie's properties does it.
Hope this help.
I solved using this code:
chartObj.tooltip.options.enabled = false;
Setting to "false" when I hover and to "true" on mouseout.

Highcharts graph: tooltip when mouse over label

On Highcharts graph, can we show a tool tip when mouse over label
other tool tip than shown when mouse over columns (point)?
thanks
Chanan
I've managed to achieve this - you need two steps:
1.) For the xAxis or yXis, set the labels options; the 'formatter' property should include a html title attribute. Utilise a function for dynamic outputs. Ensure the 'useHTML' property is set to true. eg:
useHTML: true,
formatter: function () {
return '<div class="label_tip" style="font-size:12px; font-weight:500;" title="'+this.value+'">'+this.value+'</div>'; }
2.) Use any tooltip library to alter the titles to a tooltip. This should be triggered in the Highcharts load or redraw event.
In this example I'm using qTips to create the label tooltips - http://jsfiddle.net/amichaels/quXLg/

Resources