Develop Reference

How to start column of waterfall chart from zero

I have a waterfall chart working, but I need that penultimate column start at zero.
I think I need to create a dummy point that hide and set Axis.min on the second point y position, but I can't put this working.
chart: {
type: 'waterfall'
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
//colors: ['#DADBDF', '#ED4D5F','#ED4D5F','#ED4D5F','#ED4D5F','#ED4D5F','#D7EAFD','#D7EAFD','#D7EAFD' ],
xAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
categories: [],
},
yAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
plotBands: [{
color: '#000000',
from: 0,
to: 0
}],
title: {
text: ''
},
},
legend: {
enabled: false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: '#000000'
},
colorByPoint: true,
pointWidth: 150
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
turboThreshold: 0,
label: {
enabled: false
}
}
},
series: [{
data: [],
showInLegend: false,
}],

You can add another waterfall series with defined x values:
Highcharts.chart('container', {
chart: {
type: 'waterfall'
},
...,
plotOptions: {
series: {
grouping: false
}
},
series: [{
data: [...]
}, {
data: [{
y: 569000,
x: 5
}, {
y: 1569000,
x: 6
}]
}]
});
Live example: https://jsfiddle.net/BlackLabel/qc07y5kf/
API Reference: https://api.highcharts.com/highcharts/series.waterfall.data

Secondary Axis to Scale on Chart

I am trying to get both lines on my chart to scale correctly, I have read through the documentation but can't seem to find how to do this.
images
The above image shows what happens to the orange line when a secondary axis is added. It's like they are using the same scale rather than their own.
I currently have the below code:
$(function(e) {
/*-----echart1-----*/
var options = {
chart: {
height: 300,
type: "line",
stacked: false,
toolbar: {
enabled: false
},
dropShadow: {
enabled: true,
opacity: 0.1,
},
},
colors: ["#f99433", '#6759C8'],
dataLabels: {
enabled: false
},
stroke: {
curve: "straight",
width: [3, 3, 0],
dashArray: [0, 4],
lineCap: "round"
},
grid: {
padding: {
left: 0,
right: 0
},
strokeDashArray: 3
},
markers: {
size: 0,
hover: {
size: 0
}
},
series: [{
name: "Price",
type: 'line',
data: ["4.12","4.08","3.98","3.99","3.95","4.01"] }, {
name: "Socials",
type: 'line',
data: ["23","17","6","6","7","7"] }],
yaxis: [
{
title: {
text: "Price",
},
},
{
opposite: true,
title: {
text: "Socials"
}
}
],
xaxis: {
type: "month",
categories: ["2021-12-09 17:01:25","2021-12-09 18:01:29","2021-12-09 19:01:33","2021-12-09 20:01:37","2021-12-09 21:01:42","2021-12-09 22:01:45"],
axisBorder: {
show: false,
color: 'rgba(119, 119, 142, 0.08)',
},
labels: {
style: {
color: '#8492a6',
fontSize: '12px',
},
},
},
fill: {
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55
}
},
tooltip: {
show:false
},
legend: {
position: "top",
show:true
}
}
var chart = new ApexCharts(document.querySelector("#chartArea"), options);
chart.render();

ApexCharts: Line graph overflowing out of Y axes

Hope you guys are doing okay.
I am working on a line graph from Apex Charts and every thing seems to be working fine except one issue.
The lines cross-over/overflows on the y axes whereas they are supposed to stay between the y axes. I have tried adding offsetX to almost everything but it just doesn't seem to work.
What is it that I am doing wrong here? How can I fix it?
Here's CODEPEN.
Here's an image of the issue:
Here's the snippet:
const lineChartEl = document.querySelector('#line-chart');
const lineChartOptions = {
chart: {
height: '380',
width: "100%",
type: "line",
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.35
},
foreColor: 'red', // numbers color
toolbar: {
show: true,
offsetX: -30,
offsetY: 0,
tools: {
download: true,
selection: true,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
},
export: {
csv: {
filename: 'data',
columnDelimiter: ',',
headerCategory: 'category',
headerValue: 'value',
dateFormatter(timestamp) {
return new Date(timestamp).toDateString()
}
},
svg: {
filename: 'data',
},
png: {
filename: 'data',
}
}
},
autoSelected: 'zoom'
},
legend: {
position: 'top'
},
grid: {
show: true,
padding: {
left: 0,
right: 0
},
borderColor: "rgba(0,0,0,0.1)"
},
colors: ['red', 'blue', 'yellow'],
stroke: {
width: 2,
},
tooltip: {
theme: "dark"
},
series: [{
name: "Cost",
data: [0, 1042, 2120, 3340, 4013, 5012, 6750, 7520, 8055, 9210]
},
{
name: "Revenue",
data: [1131, 2311, 3143, 4565, 6012, 7750, 8520, 9055, 10210, 7530]
},
{
name: "Profit %",
data: [2, 5, 3, 4, 6, 3.4, 2.2, 5.2, 1.3, 3.8]
}
],
yaxis: [{
title: {
text: "Cost / Revenue"
},
seriesName: "Cost",
tickAmount: 5,
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
{
title: {
text: "Kilograms"
},
seriesName: "Weight 1",
show: false
},
{
title: {
text: "Profit %"
},
opposite: true,
tickAmount: 5,
seriesName: "Profit %",
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
],
xaxis: {
tickPlacement: 'on',
axisBorder: {
color: 'red',
},
axisTicks: {
color: 'blue',
},
tooltip: {
enabled: false,
}
},
};
const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>

You can fix it by removing padding inside grid options:
const lineChartEl = document.querySelector('#line-chart');
const lineChartOptions = {
chart: {
height: '380',
width: "100%",
type: "line",
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.35
},
foreColor: 'red', // numbers color
toolbar: {
show: true,
offsetX: -30,
offsetY: 0,
tools: {
download: true,
selection: true,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
},
export: {
csv: {
filename: 'data',
columnDelimiter: ',',
headerCategory: 'category',
headerValue: 'value',
dateFormatter(timestamp) {
return new Date(timestamp).toDateString()
}
},
svg: {
filename: 'data',
},
png: {
filename: 'data',
}
}
},
autoSelected: 'zoom'
},
legend: {
position: 'top'
},
grid: {
show: true,
borderColor: "rgba(0,0,0,0.1)"
},
colors: ['red', 'blue', 'yellow'],
stroke: {
width: 2,
},
tooltip: {
theme: "dark"
},
series: [{
name: "Cost",
data: [0, 1042, 2120, 3340, 4013, 5012, 6750, 7520, 8055, 9210]
},
{
name: "Revenue",
data: [1131, 2311, 3143, 4565, 6012, 7750, 8520, 9055, 10210, 7530]
},
{
name: "Profit %",
data: [2, 5, 3, 4, 6, 3.4, 2.2, 5.2, 1.3, 3.8]
}
],
yaxis: [{
title: {
text: "Cost / Revenue"
},
seriesName: "Cost",
tickAmount: 5,
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
{
title: {
text: "Kilograms"
},
seriesName: "Weight 1",
show: false
},
{
title: {
text: "Profit %"
},
opposite: true,
tickAmount: 5,
seriesName: "Profit %",
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
],
xaxis: {
tickPlacement: 'on',
axisBorder: {
color: 'red',
},
axisTicks: {
color: 'blue',
},
tooltip: {
enabled: false,
}
},
};
const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>

How to make a square and horizontal lines in highcharts?

Need help with highchartsJs. I need chart like on screenshots. For lines i found this, but not fully what i needed. For square i don't have any ideas. Square is most priority.
Any help will be appreciated. Thanks.
square
horizontal lines

If someone need something like this
https://jsfiddle.net/gdgb941o/20/
chart: {
type: 'column'
},
title: {
text: false
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
tickWidth: 0,
lineWidth: 0,
type: 'category',
gridLineWidth: 0
},
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
},
max: 100,
title: {
text: false
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
legend: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
grouping: false
},
series: {
}
},
series: [{
data: [{
borderWidth: 2,
borderColor:'#41bc9b',
color: 'white',
name: 'Yes',
y: 100,
dataLabels: {
formatter: function() {
return "33" + "%"
},
enabled: true,
inside: true,
align: 'center',
color: 'black',
style: {
fontSize: 20,
textOutline: false
}
}
}, {
borderWidth: 2,
borderColor:'#41bc9b',
color: 'white',
name: 'The email did not come',
y: 100,
dataLabels: {
formatter: function() {
return "80" + "%"
},
enabled: true,
inside: true,
align: 'center',
color: 'black',
style: {
fontSize: 20,
textOutline: false
}
}
}, {
borderWidth: 2,
borderColor:'#41bc9b',
color: 'white',
name: 'Error in verification',
y: 100,
dataLabels: {
formatter: function() {
return "55" + "%"
},
enabled: true,
inside: true,
align: 'center',
color: 'black',
style: {
fontSize: 20,
textOutline: false
}
}
},
{
borderWidth: 2,
borderColor:'#41bc9b',
color: 'white',
name: 'No',
y: 100,
dataLabels: {
formatter: function() {
return "20" + "%"
},
enabled: true,
inside: true,
align: 'center',
color: 'black',
style: {
fontSize: 20,
textOutline: false
}
}
}]
}, {
pointPadding: 0.125,
data: [{
color: '#41bc9b',
name: 'Yes',
y: 33
}, {
color: '#41bc9b',
name: 'The email did not come',
y: 80
}, {
color: '#41bc9b',
name: 'Error in verification',
y: 55
},
{
color: '#41bc9b',
name: 'No',
y: 20
}]
}]

Tick position on X axis

How can I limit showing ticks on X axis in Highcharts? The last one is outter of X axis:
My source:
var options = {
chart: {
renderTo: 'chart',
events: {
load: function(event) {
}
},
type: 'spline',
animation: false
},
title: {
text: ''
},
colors: [
'#499878','black'
],
rangeSelector: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true,
crosshairs: true
},
series: [{
name: 'Temperature (°C)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' °C'
},
yAxis: 0,
color: '#89A54E',
data: []
},{
name: 'Wind speed (m/s)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' m/s'
},
yAxis: 1,
color: '#4572A7',
data: []
},{
name: 'Humidity (%)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' %'
},
yAxis: 2,
color: '#910000',
data: []
},{
name: 'Wind direction (°)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' °'
},
yAxis: 3,
color: '#000000',
dashStyle: 'shortdot',
data: []
}],
xAxis: {
type: 'datetime',
tickInterval: 10000,
min: 0,
max: 0
},
yAxis: [{
labels: {
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
gridLineWidth: 1,
opposite: true
},{
labels: {
formatter: function() {
return this.value +' m/s';
},
style: {
color: '#4572A7'
}
},
title: {
text: 'Wind speed',
style: {
color: '#4572A7'
}
},
gridLineWidth: 1,
opposite: false,
min: 0
},{
labels: {
formatter: function() {
return this.value +' %';
},
style: {
color: '#910000'
}
},
title: {
text: 'Humidity',
style: {
color: '#910000'
}
},
gridLineWidth: 1,
opposite: true
},{
labels: {
formatter: function() {
return this.value +' °';
},
style: {
color: '#000000'
}
},
title: {
text: 'Wind direction',
style: {
color: '#000000'
}
},
opposite: false,
reversed: true,
min: 0,
max: 360,
minorGridLineDashStyle: 'longdash',
minorTickInterval: 'auto',
minorTickWidth: 0,
tickInterval: 90
}],
plotOptions: {
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
}
},
scatter: {
marker: {
enabled: true
}
}
}
};

I found out it's matter of oveflow: 'justify'. jsfiddle

What happens if you use 'spacingRight' (http://api.highcharts.com/highcharts#chart.spacingRight) as below:
chart: {
renderTo: 'chart',
events: {
load: function(event) {
}
},
type: 'spline',
animation: false,
spacingRight: 100 // you may change this for testing...
},