Display informations under the X-Axis like in Excel with Highcharts - 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/

Related

Highcharts: Previous category data in tooltip

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"
....

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/

Highcharts : How can I add minor ticks on xAxis with month categories

I'm trying to get something like this:
and I'm having trouble with adding those small ticks on the xAxis?
The code I have right now looks something like this: JSFIDDLE DEMO
How in the world do I get those tiny tick marks between the dates? I've read abount tickIntervals, and minorTickIntervals in tha API documentation, but nothing seems to work.
Thank you for any help and guidance.
EDIT: It seems that tick intervals don't work when I have categories in the xAxis options.
xAxis: {
//categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
gridLineWidth: 1,
minorGridLineWidth: 0,
minorTickPosition:'inside',
minorTickLength:10,
minorTickWidth: 1,
minorTickInterval:0.1,
},

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