Develop Reference

Highcharts - Disable the legend of secondary y axis by default

I wanted to disable the Secondary yaxis legend to be disabled by default. User can then click on the legend to enable it on the chart.
Example :
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-multi-axes
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo',
align: 'left'
},
subtitle: {
text: 'Source: WorldClimate.com',
align: 'left'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
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]
}
},
enable: false,
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,255,0.25)'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
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'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
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'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
floating: false,
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
yAxis: [{
labels: {
align: 'right',
x: 0,
y: -6
},
showLastLabel: false
}, {
labels: {
align: 'left',
x: 0,
y: -6
},
showLastLabel: false
}, {
visible: false
}]
}
}]
}
});
In this example, secondary yaxis label "Rainfall" is enabled by default.
What Im looking for is disabled "Rainfall" by default. User can then click on it and enable it.
Here's what I am looking for:
Rainfall is disabled here.
Thank you in advance!!

We can just pass "visible: false" in the data series. This will disable the series by default.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-visible/
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
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],
visible: false
}, {
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]
}]
});

Hichcharts - Custom legend css not getting displayed in Print Chart download functionality

I want to use custom legend in chart. So added some css as per requirement to render custom legends. It getting displayed properly on web. But when I try to download it using Print Chart option, it's not displaying custom legend design in downloaded document. In other download options it's working fine except Print Chart. I have tried many solutions but nothing works. Even I have tried with Highcharts jsfiddle example as well with custom legend, it's not working.
Please refer example here. https://jsfiddle.net/DipaliShinde/ep73vqun/1/ (In this example it's not showing css as expected for Series1 legend with background color)
Highcharts.chart('container', {
exporting: {
chartOptions: { // specific options for the exported image
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
fallbackToExportServer: false
},
title: {
text: 'Offline export'
},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'right',
useHTML: true,
floating: false,
verticalAlign: 'middle',
x: -40,
y: 10,
//maxHeight: 320,
itemMarginBottom: 20,
labelFormatter: function () {
return '<div><div style="padding-right: 5px;color: #666666;text-align:center;">Text 123<span style="padding-left: 5px;font-size: 12px;font-weight: 300;color: #999999;">(16.78%)</span></div>' +
'<div style="background:' + this.color + ';height:20px; width:120px;text-align:center;color:white;font-weight:300;font-size: 10px;line-height:20px;">'
+ this.name + '</div></div>';
}
},
subtitle: {
text: 'Click the button to download as PNG, JPEG, SVG or PDF'
},
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
Please guide me to resolve this issue.
Thanks

You can enable experimental allowHTML option, but without online export server it works only for SVG vector image. You can find more information here: https://github.com/highcharts/highcharts/issues/5985
exporting: {
allowHTML: true,
chartOptions: {...},
//fallbackToExportServer: false
}
Live demo: https://jsfiddle.net/BlackLabel/2nvpfgyo/
API Reference: https://api.highcharts.com/highcharts/exporting.allowHTML

With allowHTML, it works for all download option except Print Chart. For Print Chart its not rendering legend same as other download options. Attaching here screenshot.
Print Chart Legend Issue

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.

Highcharts time series combo graph where few months data is null

I am trying to develop a multi axis combo graph using highcharts api with months in x-axis and multiple y axis with 2 axes having percentages and 1 having number. This is similar to what you see in this link. This works fine when you have the y axes data for all 12 months. In some cases y axes data for few months are missing. In that case I still want to show the month in the x axis with no data. Currently if I have y axes data for only 2 months (say June and December), it would show as the data for Jan and Feb instead. Please find the code which I'm using and let me know what can be the resolution for this.
var chartMonthlyData = {
title: {
text: ''
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{
min: 0,
max: 50,
labels: {
format: '{value} %'
},
title: {
enabled: false
},
opposite: true
}, {
title: {
text: '',
},
labels: {
formatter: function () {
return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
}
}, {
min: 0,
max: 50,
title: {
enabled : false
},
labels: {
enabled: false
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
align: 'right',
x: -30,
verticalAlign: 'top',
y: -5,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
color: '#C8102E',
name: 'Delivered',
type: 'column',
yAxis: 1,
data: deliveredMonthly,
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>'
+ '{point.y}' +'</b><br/>'
}
}, {
color: '#AAAAAA',
name: 'Open Rate',
type: 'line',
yAxis: 2,
data: openRateMonthly,
lineWidth: 4,
marker: {
enabled: true,
"symbol": "circle"
},
tooltip: {
valueSuffix: ' %'
}
}, {
color: '#5891c8',
name: 'Clickthrough Rate',
type: 'line',
data: clickThroughRateMonthly,
lineWidth: 4,
marker: {
enabled: true,
"symbol": "circle"
},
tooltip: {
valueSuffix: ' %'
}
}]
}
In this image, actual months in x axis are January, June and August. I need the 12 months to be shown in the graph with the y axes data properly tied with months.

Get proper data from server side or update the data before providing to highcharts
data: [49.9, 71.5, 106.4, null, null, null, null, null,null, null, null, null],
add or substitute null to data series with no values corresponding to month in order to have series length same as categories
Fiddle demo

Simply add max parameter inside xAxis object.
API Reference:
http://api.highcharts.com/highcharts/xAxis.max
Example:
http://jsfiddle.net/xkqn4qq7/

There are multiple ways to format your data such that the gaps show up. You can use a 2 dimensional array:
var deliveredMonthly =[[0,4],[5,5],[7,2]],
You can use an array of objects, setting the x & y:
openRateMonthly = [{x:0,y:22},{x:5,y:5},{x:7,y:3}],
And, you can populate a one dimensional array with nulls for your missing data points.
clickThroughRateMonthly = [10,null,null,null,null,12,null,null,50];
In order to guarantee you have all 12 months, you should set the min and max on the xAxis
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
crosshair: true,
min:0,
max:11
}],
http://jsfiddle.net/v159gw36/2/

Can color of data label be different inside and outside of the bar in Highchart

I'm wondering that the color of the text which is inside the bar chart(plotOptions.bar.dataLabels.color) can be different if the text doesn't fit to bar length. For instance:
Code is here:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
height: 700
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
bar: {
stacking: 'normal',
pointPadding: 0,
groupPadding: 0.2,
dataLabels: {
enabled: true,
color: 'black',
align: "right",
format: '{y} M',
inside: false,
style: {
fontWeight: 'bold'
},
verticalAlign: "middle"
},
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 2.33]
}]
});
});
Thanks in advance

Possible solution is to use formatter. Determine if value is lower than some level, and then change dataLabel color. For example: http://jsfiddle.net/Yrygy/176/
formatter: function() {
var max = this.series.yAxis.max,
color = this.y / max < 0.05 ? 'black' : 'white'; // 5% width
return '<span style="color: ' + color + '">' + this.y + ' M</span>';
},
You can also compare point's width with length of y-value string.

You can set the color to contrast, and it will change depending on whether the dataLabel is inside/outside the bar.
style: {
color: 'contrast'
}

I use the "isInside" value like so:
series: [{
name: 'Percentage',
data: this.calculateChartSeries(),
dataLabels: {
enabled: true,
rotation: 0,
align: 'right',
borderWidth: 1,
formatter: function() {
if (this.point.isInside == true) {
return '<span style="color: white">' + this.y + '%</span>';
} else {
return '<span style="color: black">' + this.y + '%</span>';
}
}
}
}]
But if that doesn't work for you, it's possible to use "this.point.shapeArgs.height" and check if that height is greater than the length of your text.