Develop Reference

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();

How to prevent an ApexCharts chart label from being slanted

I am working on my project with Django where I need to use Javascript and a chart library. I have two charts that I made with ApexCharts, but I don't know how to prevent the label text to being slant and overflow. I can't find anything about this problem in the documentation or I'm not enough familiar to find what I need. :)
var options07 = {
series: [{
name: 'SOHA',
data: [ {{i.szervkult07a}} ]
}, {
name: 'RITKÁN',
data: [ {{i.szervkult07b}} ]
}, {
name: 'IDŐNKÉNT',
data: [ {{i.szervkult07c}} ]
}, {
name: 'GYAKRAN',
data: [ {{i.szervkult07d}} ]
}, {
name: 'MINDIG',
data: [ {{i.szervkult07e}} ]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
stackType: '100%'
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'
],
},
fill: {
opacity: 1
},
legend: {
position: 'right',
offsetX: 0,
offsetY: 50
},
};
var chart = new ApexCharts(document.querySelector("#chart_szk07"), options07);
chart.render();
var options07b = {
series: [{
name: 'SOHA',
data: [{{i.szervkult07a}}]
}, {
name: 'RITKÁN',
data: [{{i.szervkult07b}}]
}, {
name: 'IDŐNKÉNT',
data: [{{i.szervkult07c}}]
}, {
name: 'GYAKRAN',
data: [{{i.szervkult07d}}]
}, {
name: 'MINDIG',
data: [{{i.szervkult07e}}]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
},
yaxis: {
title: {
text: 'fő'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return val + " fő"
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart_szk07b"), options07b);
chart.render();

From the docs, You should be able to add rotate: 0 to the labels section of xaxis. I suggest trying to shorten those. I imagine a long label will not look as good as a shorter one.
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
labels: {
rotate: 0
}
}

Hightchart issue, when more then one plot is used on page

I am working on page, where i need to have multiple plots, one being a solid gauge and the other being a line graph.
I am using the Ionic Framework 5 with angular and High Charts.
I am finding that when one plot is displayed, it works fine, but with more then one I am getting some type of conflict where the line chart does not get updated and the gauge gets data which is meant for the line graph.
This my code. Do i need to do anything in perticular?
particulate_plot() {
let particulte_chart = this.particulte_chart.stockChart('particulate_plot', {
chart: {
type: 'line',
animation: true,
backgroundColor: "#464340",
},
credits: {
enabled: false
},
legend: {
enabled: true,
layout: 'horizontal',
verticalAlign: 'bottom',
floating: false,
},
rangeSelector: {
selected: 1,
inputEnabled: false,
enabled: false
},
title: {
text: "Particulate Mass Concentration",
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b',
},
title: {
text: 'Date',
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
},
labels: {
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
}
},
yAxis: {
min: 0,
opposite: false,
title: {
text: "Mass \xb5g/m\xb3",
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
},
labels: {
formatter: function() {
return (this.value.toFixed(2) ? '' : '') + this.value.toFixed(2);
},
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
},
plotLines: [{
label: {
text: "EU Limit 40 \xb5g/m\xb3",
style: {
"color": "#f4f5f8",
"fontSize": "12px"
},
align: 'center',
y: -10,
},
color: 'red', // Color value
value: 3, // Value of where the line will appear
width: 5 // Width of the line
}],
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
series: [{
boostThreshold: 0,
color: '#FFF59D',
name: "PM1.0",
type: 'spline',
data: this.datasets[0].data,
showInNavigator: true,
visible: false,
lineWidth: 1,
},
{
boostThreshold: 0,
color: '#FFAB40',
name: "PM2.5",
type: 'spline',
data: this.datasets_b[0].data,
showInNavigator: true,
visible: true,
lineWidth: 1,
},
{
boostThreshold: 0,
color: '#90CAF9',
name: "PM4",
type: 'spline',
data: this.datasets_c[0].data,
showInNavigator: true,
visible: false,
lineWidth: 1,
},
{
boostThreshold: 0,
color: '#4DD0E1',
name: "PM10",
type: 'spline',
data: this.datasets_d[0].data,
showInNavigator: true,
visible: false,
lineWidth: 1,
}
],
"tooltip": {
"pointFormat": "<b>{point.y:.2f}</b>",
"shared": true
},
});
}
}
air_main_gauge() {
let maingauge_chart = this.maingauge_chart.stockChart('MainGuageA', {
chart: {
type: 'solidgauge',
backgroundColor: 'white',
},
credits: {
enabled: false
},
pane: {
center: ['50%', '50%'],
size: '100%',
innerSize: '10%',
startAngle: -150,
endAngle: 150,
background: {
backgroundColor: HighCharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '85%',
outerRadius: '100%',
shape: 'arc'
}
},
lineWidth: 1,
tooltip: {
enabled: false
},
navigator: {
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled: false,
enabled: false
},
scrollbar: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
// title: {
// text: 'Speed'
// },
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.8, '#ed1f1f'] // red
],
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
gridLineWidth: 10,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
enabled: false
}
},
series: [{
// name: 'Speed',
data: [20],
dataLabels: {
format: '<div style="text-align:center">' +
'<span style="font-size:25px">{y}</span><br/>' +
'<span style="font-size:12px;opacity:0.4">km/h</span>' +
'</div>',
position: 'right',
},
tooltip: {
// valueSuffix: ' km/h'
enabled: false
}
}],
plotOptions: {
solidgauge: {
innerRadius: '85%',
dataLabels: {
y: -45,
borderWidth: 0,
useHTML: true
}
},
},
});
}
</ion-row><ion-row class="ion-align-self-start"><!-- <script src="https://code.highcharts.com/highcharts.js"></script>--><script src="https://code.highcharts.com/stock/highstock.js"></script><script src="https://code.highcharts.com/highcharts-more.js"></script><script src="https://code.highcharts.com/modules/solid-gauge.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script><script src="https://code.highcharts.com/modules/export-data.js"></script><script src="https://code.highcharts.com/modules/accessibility.js"></script><div id="particulate_plot" style="width:100%; height:100%;"></div><div id="MainGuageA" style="width: 100%;" class="posi"></div><!-- <ion-item class="leafpostion" lines="none"></ion-item>--><!-- <ion-icon name="leaf" class="leaf"></ion-icon>--></ion-row>

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>

ApexChart data have mismatched y-axis

I'm playing with the apexchart.js library and getting this mismatched graph. I want to display an area graph, where the X line is a collection of date-times and the Y line has some values (floating type).
On the picture, you can see the library set the bad zero point for some series.
Here are my settings for the graph.
let options = {
chart: {
height: 390,
type: 'area',
stacked: false
},
dataLabels: {
enabled: false
},
series: [{
name: "Power – Total",
data: powerTotal,
type: 'area'
},
{
name: "Power – Solar A",
data: powerSolarA,
type: 'area'
},
{
name: "Power – Solar B",
data: powerSolarB,
type: 'area'
},
{
name: "Consumption",
data: consumption,
type: 'area'
},
{
name: "Battery",
data: batteryPower,
type: 'area'
},
{
name: "Grid",
data: gridPower,
type: 'area'
},
],
xaxis: {
type: 'datetime',
categories: datetimes,
labels: {
datetimeUTC: false
}
},
yaxis: [
{
seriesName: 'Power – Total',
title: {
text: "kW"
},
decimalsInFloat: 2,
showAlways: true,
floating: false,
},
{
seriesName: 'Power – Solar A',
show: false,
floating: false,
},
{
seriesName: 'Power – Solar B',
show: false,
floating: false,
},
{
seriesName: 'Consumption',
show: false,
floating: false,
},
{
seriesName: 'Battery',
show: false,
floating: false,
},
{
seriesName: 'Grid',
show: false,
floating: false,
},
],
markers: {
size: 0,
hover: {
size: undefined,
sizeOffset: 3
}
},
colors: lineColors,
tooltip: {
x: {
format: "dd:MM:yyy HH:mm"
}
},
fill: {
opacity: .6,
type: 'solid'
},
stroke: {
show: true,
curve: 'straight',
width: [2, 2, 2, 2, 2, 2, 4]
},
grid: {
show: true
},
legend: {
itemMargin: {
vertical: 24
}
}
};
Does anybody know what it can be?
Thanks