Highcharts: Previous category data in tooltip - highcharts

In this fiddle http://jsfiddle.net/c98vd98b/ is a solution for displaying a previous value in tooltip.
How can I do this please same but for ?
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
for example I want have in tooltip actual and previous month like this.
Tooltip1: "between Jan and Feb is actual value"
Tooltip2: "between Feb and Mar is actual value"
....

Related

Display informations under the X-Axis like in Excel with Highcharts

I have a problem to display informations in Highcharts under the X-Axis, it should look like in the:
I tried the Function exporting.showTable but it doesnt look like i want it. Thanks for any help.
Best regards
RichieRich

From the Highcharts side, you can start from this template and add a custom HTML table under the chart.
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickWidth: 1,
offset: 0,
tickLength: 30
},
Demo: https://jsfiddle.net/BlackLabel/hdjto1zv/

highcharts only one label is getting displayed

Only one label is displaying on xAxis categories.
Lable "Jan" is displaying but no other label shows up.
Chart type is: Column
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}

Highcharts custom x-axis categories aligned center (Under the pins)

I am setting custom categories inside the x-axis, once I do that however, the x-axis labels lose their alignment (no longer under the pins)
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
This produces
but what I am after is (with the labels as 'Jan' 'Feb'..etc)
Is there a way to achieve that with custom categories?
Fiddle here: http://jsfiddle.net/7Lydc94n/

You need to set axis.tickmarkPlacement to 'on'.
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickmarkPlacement: 'on'
},
example: http://jsfiddle.net/7Lydc94n/3/

How do you get the mouse hovered label value with the highcharts custom event plugin?

I am using highchars.js and the custom-event plugin.
I add a mouseover event handler on the xAxis label. How can I get the hovered label value in the event handler? Thanks.
https://jsbin.com/havezujuva/edit?html,js,output
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels:{
events: {
mouseover: function (e) {
console.log('over');
}
}
}
}

You can access it from this.axis.categories[this.value].
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels:{
events: {
mouseover: function (e) {
console.log('over');
console.log(this.axis.categories[this.value]);
}
}
}
}

Execute function after zoom highcharts

Is it possible to execute a function after zoom on a chart in Highcharts ?

Use the afterSetExtremes event:
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
events: {
afterSetExtremes: function(event){
if (this.getExtremes().dataMin < event.min)
alert("Zoomed in!");
}
}
}
Here's a working example: http://jsfiddle.net/RcdfW/

Resources