<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Inverted axis chart with Range Annotations</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
<script>
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
)
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<script src="../../assets/stock-prices.js"></script>
</head>
<body>
<div id="app">
<div id="chart">
<apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
</div>
</div>
<!-- Below element is just for displaying source code. it is not required. DO NOT USE -->
<div id="html">
<div id="chart">
<apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
</div>
</div>
<script>
new Vue({
el: '#app',
components: {
apexchart: VueApexCharts,
},
data: {
series: [{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}],
chartOptions: {
annotations: {
yaxis: [{
y: 'United Kingdom',
y2: 'South Korea',
borderColor: '#FEB019',
label: {
borderColor: '#333',
style: {
fontSize: '10px',
color: '#333',
background: '#FEB019',
},
text: 'Y-axis range',
}
}],
xaxis: [{
x: 400,
x2: 800,
borderColor: '#00E396',
label: {
borderColor: '#00E396',
style: {
fontSize: '10px',
color: '#fff',
background: '#00E396',
},
offsetY: -10,
text: 'X-axis range',
}
}]
},
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
horizontal: true,
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
}
},
},
})
</script>
</body>
</html>