Develop Reference

Highchart hide series element with xAxis

I have Highchart with series data and I want to hide() one data element, works correctly when I hide() the first element, but when I try to hide() second or any other element only data point is hidden, and the label xAxis does not disappear :(
Guys, could you explain to me why is this happening and how I can hide the entire element with highcharts-axis-labels?
Many thanks!
My jsfiddle code here
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'Xalkori',
data: [{
x: 44,
y: 1435
}, {
x: 44,
y: 689
}]
}, {
name: 'Xofigo',
data: [{
x: 45,
y: 14182
}, {
x: 45,
y: 514
}],
visible: false,
}, {
name: 'Xtandi',
data: [{
x: 46,
y: 9065
}, {
x: 46,
y: 572
}]
}, {
name: 'Yervoy',
data: [{
x: 47,
y: 42646
}, {
x: 47,
y: 1395
}]
}]
});

Notice that the amount of the xAxis labels, their visibility etc are independent on the chart point visibility.
Demo: https://jsfiddle.net/BlackLabel/7e90jwdL/
If you want to hide the xAxis labels base on the series visibility, you will need to do it programmatically.
Something like here:
events: {
render() {
let chart = this;
chart.series.forEach(s => {
if (!s.visible) {
chart.xAxis[0].ticks[s.xData[0]].label.hide()
} else {
chart.xAxis[0].ticks[s.xData[0]].label.show()
}
})
}
}
Be aware that this demo is just a showcase and it works fine if the series points x values are the same.
Demo: https://jsfiddle.net/BlackLabel/qn0tsdeh/
API: https://api.highcharts.com/highcharts/chart.events.render

Highcharts: Align two series horizontally to the same x-axis which are in opposite sides

I have a highchart which has two series with two yAxises. And both of them share the same xAxis. But I need these two series to be on the opposite sides (one at the bottom and the other at the top). I can achieve this by adding reversed: true in the options of one yAxis. But now I'm having an issue in aligning both series in one line horizontally. I don't mind them getting overlapped. After searching I found out that by putting minPadding and maxPadding I can remove this space, but it didn't work. Is this possible in highchart?
I want it to be something like below,
Can anyone suggest how to align like this? Thanks in advance.
My code is as follows
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [
{
opposite: true
},
{ // Secondary yAxis
reversed: true
}
],
series: [{
name: 'S1',
type: 'column',
data: [40, 60, 50],
minPadding: 0,
maxPadding: 0
}, {
name: 'S2',
type: 'column',
yAxis: 1,
xAxis: 0,
minPadding: 0,
maxPadding: 0,
data: [30, 20, 10]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

You need to disable grouping:
series: [{
...,
grouping: false
}, ...]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4945/
API Reference: https://api.highcharts.com/highcharts/series.column.grouping

Get correct sizing for apex line chart

I am using apex chart for modern and flexible charts. (https://apexcharts.com/).
Here is my code snippet:
var options = {
chart: {
height: 15,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: "Desktops",
data: [10, 5, 2, 15, 12, 11, 10, 1, 0]
}],
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
}
var chart = new ApexCharts(
document.getElementById("chart"),
options
);
chart.render();
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
As you can see the height of the chart is a no go. Its cause by the small numbers. When I would have data over 100 it works, but with small numbers, I have this problem. Any solutions to fix this?
~filip

try increasing chart.height to 200.
this allows the chart to be visible.
see following working snippet...
var options = {
chart: {
height: 200,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: "Desktops",
data: [10, 5, 2, 15, 12, 11, 10, 1, 0]
}],
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
}
var chart = new ApexCharts(
document.getElementById("chart"),
options
);
chart.render();
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Highchart - Connect nulls only when value is null

I have a Highchart which renders a line series as shown in the snippet below:
Highcharts.chart('container', {
title: {
text: 'The graphs connect from April to June, despite the null value in May'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
connectNulls: true
}
},
series: [{
data: [
20,
60,
null,
11,
null,
160,
120,
130,
NaN,
NaN,
80,
40],
type: 'line',
name: 'Area range series',
marker: {
enabled: false
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
I know that Highchart has a property connectNulls to connect null values. But I want to connect only when value is Null and not NaN.

NaN is not a correct point format, just like String or Boolean. If value is not a number then it's treated as null-point. I think you want to use opposite options: connectNulls to false and just remove null points, with given indexes, demo: http://jsfiddle.net/BlackLabel/fquznbeq/4/
You can automate this process: http://jsfiddle.net/BlackLabel/fquznbeq/8/
function toHCFormat(data) {
var formatted = [];
data.forEach(function (point, i) {
if (point === null) {
// do nothing
} else if (isNaN(point)) {
formatted.push([i, null]);
} else {
formatted.push([i, point]);
}
});
return formatted;
}
Use:
data: toHCFormat([
20,
60,
null,
11,
null,
160,
120,
130,
NaN,
NaN,
80,
40
]),

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/