https://codepen.io/xxx44yyy/pen/PvjLvL?editors=0010
vertical annotation:

click to child:

see non vertical annotation:

why green label block is non vertical?

code:
var options = {
annotations: {
xaxis: [
{
x: new Date("11/17/2017").getTime(),
strokeDashArray: 0,
borderColor: "#775DD0",
label: {
borderColor: "#775DD0",
style: {
color: "#fff",
background: "#775DD0"
},
text: "X Axis Anno Vertical"
}
}
],
},
chart: {
height: 380,
type: "line",
id: "areachart-2",
toolbar: {
show: true,
tools: {
download: false,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
customIcons: [{
icon: '<img src="http://adecinc.com/wp-content/uploads/2018/07/baby-baby-girl-newborn-raw-simple-icon-png-18.png" width="16">',
title: 'xxxx',
click: function() {
chart.addXaxisAnnotation({
x: new Date('26 Nov 2017').getTime(),
x2: new Date('28 Nov 2017').getTime(),
fillColor: '#B3F7CA',
opacity: 0.4,
label: {
borderColor: '#B3F7CA',
style: {
fontSize: '10px',
color: '#fff',
background: '#00E396',
},
offsetY: -10,
text: 'X-axis range'
}
});
}
}]
}
}
},
series: [
{
data: series.monthDataSeries1.prices
}
],
labels: series.monthDataSeries1.dates,
xaxis: {
type: "datetime"
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
Fixed the issue.
Will be released in 3.6.12
@junedchhipa Thanks!! How can I use your changes right now? I did not work with webpack, react, vue. I can't find min.js
I'm use only this file: https://cdn.jsdelivr.net/npm/apexcharts@latest
The new patch version will be released tomorrow. Please use the same cdn link when it is released as it will be automatically updated too.
ok :(
The new patch version will be released tomorrow. Please use the same cdn link when it is released as it will be automatically updated too.
How soon?
How soon?
I don't know. :( Now 3.6.10
@junedchhipa
Released 3.6.12
https://cdn.jsdelivr.net/npm/apexcharts@latest
https://unpkg.com/[email protected]/dist/apexcharts.min.js
The CDN might take some hours to propagate the changes.
Released 3.6.12
https://cdn.jsdelivr.net/npm/apexcharts@latest
https://unpkg.com/[email protected]/dist/apexcharts.min.jsThe CDN might take some hours to propagate the changes.
Thanks!!!!!
Most helpful comment
Released 3.6.12
https://cdn.jsdelivr.net/npm/apexcharts@latest
https://unpkg.com/[email protected]/dist/apexcharts.min.js
The CDN might take some hours to propagate the changes.