Develop Reference

Show Columns in Highcharts on different X-Axis (side by side)

I've tried to add multiple series to different X-Axis on a column chart. My problem is, that Highcharts reserve space for each column series, but in my case the series are uniqe to one X-Axis and they are not overlapping. So I don't want to reserve space for columns that are never appear in the group.
Here is an example: https://jsfiddle.net/Kanatorabo/qs0vuehk/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Columns centered in category'
},
subtitle: {
text: 'Null or missing points are ignored'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
gridLineWidth: 1,
offset: 0,
left: "20%",
width: "80%",
}, {
categories: ['2018', '2019', '2020'],
gridLineWidth: 1,
offset: 0,
width: "20%",
}],
plotOptions: {
series: {
centerInCategory: true,
//pointPadding: 0,
},
/*column: {
grouping: false,
shadow: false,
pointPadding: 0.2,
}*/
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, null, null, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
name: "data1",
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
name: "data2",
}, {
data: [71.5, 106.4, 129.2, null, null, 135.6, 148.5, null, 194.1, 95.6, 54.4, 29.9],
name: "data3",
}, {
data: [null, 70.5, 99.4],
colorIndex: 0,
name: "data1 preVal",
linkedTo: 0,
xAxis: 1,
}, {
data: [null, 60.5, 89.4],
name: "data2 preVal",
colorIndex: 1,
linkedTo: 1,
xAxis: 1,
}, {
data: [null, 80.5, 69.4],
colorIndex: 2,
name: "data3 preVal",
linkedTo: 2,
xAxis: 1,
}]
});
In 2019/2020 and Feb/Mar there is a reserved space for 6 columns and the width of all columns is calculated as if 6 columns exists.
Thank you in advance

It looks like a bug, I reported it on the Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/15503

how to add dynamic y axis in highchart from specific point of x-axis

how to add dynamic y axis from specific point of x-axis.
suppose my x-axis values are (jan,feb,march....dec)
i want to generate y axis from Jun-dec (x-axis).
when ever i click the button but its generate a yaxis and start from jan- july in x-axis instead of jun-dec
please see the jsfiddle you can understand my problem clearly.
var chart = Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature'
},
lineWidth: 2,
lineColor: '#F33',
id: 'temperature-axis'
},
series: [{
name: 'Temperature',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
color: '#F33'
}]
});
// the button handlera
$('#add').click(function () {
chart.addAxis({ // Secondary yAxis
id: 'rainfall-axis',
title: {
text: 'Rainfall'
},
lineWidth: 2,
lineColor: '#08F',
opposite: true
});
chart.addSeries({
name: 'Rainfall',
type: 'line',
color: '#08F',
yAxis: 'rainfall-axis',
data: [135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
});
$(this).attr('disabled', true);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
<button id="add" class="autocompare">Add axis and series</button>
<button id="remove" disabled="disabled" class="autocompare">Remove axis</button>

Above problem can be solved by
1> Updating array with the null values to match the xAxis categories
$('#add').click(function () {
chart.addAxis({ // Secondary yAxis
id: 'rainfall-axis',
title: {
text: 'Rainfall'
},
lineWidth: 2,
lineColor: '#08F',
opposite: true
});
chart.addSeries({
name: 'Rainfall',
type: 'line',
color: '#08F',
yAxis: 'rainfall-axis',
data: [null,null,null,null,null,null,135.6, 148.5, 216.4, 194.1, 95.6, 54.4] //update with null values
});
$(this).attr('disabled', true);
});
Fiddle demo
2> Use pointStart to pass extra parameter from what values to start.
$('#add').click(function () {
chart.addAxis({ // Secondary yAxis
id: 'rainfall-axis',
title: {
text: 'Rainfall'
},
lineWidth: 2,
lineColor: '#08F',
opposite: true
});
chart.addSeries({
name: 'Rainfall',
type: 'line',
color: '#08F',
yAxis: 'rainfall-axis',
pointStart: 6, //start point
data: [135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
});
$(this).attr('disabled', true);
});
Fiddle demo

You must add null to your data set
data: [null,null,null,null,null,null,135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
Fiddle

How does multiple axes work in highcharts?

I'm currently working on highcharts and I am confused on how highcharts work with multiple axes, to be exact, i wanted to have a secondary axis-y but I don't understand how it works. Can someone explain to me how can I add the secondary axis and the data that i will be inputted on last will based on the secondary axis? Thank you.
Below is the example of multiple axes I've searched in jsfiddle.
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-multi-axes/
Below is the code of multiple axis:
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}]

Too hard to explain by word so i've created sample chart with 2 y-Axis and i've comment on some important action to work with multiple yAxis.
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JS code
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
//Y-Axis is the line on a graph that runs vertically (up-down) through zero.
//It is used as a reference line so you can measure from it.
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
////////Notice: importance option
opposite: true //This option will set position of this axis to the right side
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{ //Data for Secondary yAxis
name: 'Rainfall',
type: 'column',
////////Notice: importance option
yAxis: 1, //This option will define which yAxis data will runs on, if not set default all data will runs on the 0 yAxis (as left side)
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, { // Data for Primary yAxis
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}]
});
My fiddle: http://jsfiddle.net/nmtri1101/e4Lpdgj8/2/.
Hope it useful to you.

In the code you have posted you have three y-axes. Highcharts gives these axis indexes 0, 1, 2 respectively. When you input a new series, you need to tell highcharts which axis this series should use, based on these indexes. So for example, to tie data to the rainfall axis, you will need to do the following:
series: {
yAxis: 1,
data: [0,0.2,0.4]
}
See API for information and the following example from highcharts demos.

How can I create this type of stackchart

This is a stock chart.I'm not able to create this type of chart.There is something I'm missing.Because I can create this:
JSFIDDLE
using
$(function() {
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container1').add('#container2').add('#container3').bind('mousemove touchmove touchstart', function(e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function() {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function(event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function(chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
trigger: 'syncExtremes'
});
}
}
});
}
}
var chart1 = {
chart: {
renderTo: 'container1',
type: 'line',
},
credits: {
enabled: false
},
height: 120,
width: 100,
title: {
text: 'MAY/Corn-MAY/Oats Spread Profir/Loss'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
yAxis: {
title: {
text: 'MAY/Corn'
},
labels: {
enabels: false
},
},
xAxis: {
labels: {
enabled: false
},
crosshair: true,
events: {
setExtremes: syncExtremes
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'MAY/Corn',
labels: {
enable: false
},
showInLegend: false,
data: [29.9, 71.5, 150, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
};
var chart2 = {
chart: {
renderTo: 'container2',
type: 'line'
},
credits: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
yAxis: {
title: {
text: 'MAY/Oats'
},
labels: {
enabels: false
},
},
title: {
text: null
},
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'MAY/Oats',
color: 'red',
labels: {
enable: false
},
showInLegend: false,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
};
var chart3 = {
chart: {
renderTo: 'container3'
},
credits: {
enabled: false
},
height: 120,
width: 100,
title: {
text: null,
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
yAxis: {
title: {
text: 'Spread'
},
labels: {
enabels: false
},
},
xAxis: {
labels: {
enabled: false
},
crosshair: true,
events: {
setExtremes: syncExtremes
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'Spread',
color: 'blue',
labels: {
enable: false
},
showInLegend: false,
data: [29.9, 71.5, 150, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
};
var chart4 = {
chart: {
renderTo: 'container4',
type: 'column',
navigator: {
enabled: true
},
},
height: 120,
width: 100,
title: {
text: null,
},
yAxis: {
title: {
text: 'Spread'
},
labels: {
enabels: false
},
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
xAxis: {
scrollbar: {
enabled: true
},
rangeSelector: {
enabled: true
},
labels: {
enabled: true
},
crosshair: true,
events: {
setExtremes: syncExtremes
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
scrollbar: {
enabled: true
},
credits: {
enabled: false
},
name: 'Profit/Loss in Dollars',
colorByPoint: true,
labels: {
enable: false
},
showInLegend: false,
data: [29.9, 71.5, 150, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
credits: {
enabled: false
},
};
// draw on page load
var drawChart1 = new Highcharts.Chart(chart1);
var drawChart2 = new Highcharts.Chart(chart2);
var drawChart3 = new Highcharts.Chart(chart3);
var drawChart4 = new Highcharts.Chart(chart4);
// var newData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
// draw on button click
// $('#button').click(function () {
//chart1.series[0].data = newData.reverse();
//chart2.series[0].data = newData.reverse();
// drawChart1 = new Highcharts.Chart(chart1);
//drawChart2 = new Highcharts.Chart(chart2);
// });
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container1" style="height: 120px; margin-top: 1em"></div>
<div id="container2" style="height: 120px; margin-top: 1em"></div>
<div id="container3" style="height: 120px; margin-top: 1em"></div>
<div id="container4" style="height: 120px; margin-top: 1em"></div>

Highcharts highlight single point on line

I am using Highcharts to draw a line graph.
When the page loads, the line graph is drawn. Please note, that i got an y-Value for every x-Value starting from 0 till 700 ( 0,1,2,3,...,700). This is how i create the graph:
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false,
type: 'line',
marginTop: null,
marginRight: 55,
marginBottom: 50,
marginLeft: 80,
backgroundColor: backgroundColor,
spacingTop: 10,
spacingRight: 10,
spacingBottom: 15,
spacingLeft: 10,
},
title: {
text: ' Graph',
style: {color: graphLabelColor},
x: -20 //center
},
xAxis: {
title: {
text: 'xAXIS',
style: {
color: axisLabelColor
},
},
min:0,
max: 600,
gridLineColor: gridLineColor,
minorTickInterval: 50,
minorTickLength: 1,
tickInterval: 100,
minorGridLineWidth: 0,
gridLineWidth: 1,
lineColor: axisColor,
labels: {
style : {
color: axisColor
}
},
plotLines: [{
value: 0,
width: 0,
color: axisColor
}]
},
yAxis: {
title: {
text: 'yAxis',
style: {color:
axisLabelColor
},
},
min:0,
max: 700,
gridLineColor: gridLineColor,
lineColor: axisColor,
minorTickInterval: 50,
minorTickLength: 1,
minorGridLineWidth: 0,
tickInterval: 100,
labels: {
style: {
color: axisColor
}
},
plotLines: [{
value: 0,
width: 0,
color: axisColor
}]
},
exporting: {
enabled: false
},
tooltip: {
enabled: true,
borderColor: crosshairColor,
crosshairs: [{
width: 1,
color: crosshairColor,
},
{
width: 1,
color: crosshairColor,
}],
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+this.y +' & '+ this.x.toFixed(0);
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1,
borderColor: plotlineColor,
enabled: false,
floating: true,
shadow: true
},
plotOptions: {
series: {
enableMouseTracking: true
},
line: {
color:plotlineColor,
},
},
series: [{
lineWidth: 2,
name: carname,
data: dataArray,
marker: {
color:crosshairColor,
radius: 1
}
}]
});
In my HTML-Page I got two buttons to increase/decrease (+1/-1) a number in a textfield, starting at 200. The number represents a x-Coordinate in the graph.
I would like to highlight the shown number of my textfield in the graph with another color and a bigger point when the graph is loaded the first time and also when the user changes the number using one of these buttons. How can I do this?
I tried
chart.series[0].options.data[valueOfTextfield].color = 'yellow';
chart.redraw(true);
in the onclick method of the buttons but it doesnt work.
Thanks for your answers!

Using a marker we can do this:
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, { marker: {
fillColor: '#FF0000',
lineWidth: 3,
lineColor: "#FF0000" // inherit from series
},y:71.5}, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
http://jsfiddle.net/zR4Kn/

use the select method of the point object
https://api.highcharts.com/highcharts/series.line.point.events.select