How to use different color on opposite bar chart begin on specified value (not zero).
I already explore the Apexcharts docs example and can’t found any similar approach for my need, all example always use zero value as an axis.
The above example use 0 value as the axis to begin the different bar color.
What I want is to use 50 value as the axis in this y-axis
yaxis: {
min: 0,
max: 100,
}
series: [
{
name: 'title1',
data: [80]
},
{
name: 'title2',
data: [20]
}
],
All codes
new Vue({
el: '#app',
components: {
apexchart: VueApexCharts,
},
data: {
series: [
{
name: 'title1',
data: [80]
},
{
name: 'title2',
data: [20]
}
],
chartOptions: {
chart: {
type: 'bar',
height: 350
},
xaxis: {
categories: ['South Korea'
],
},
yaxis: {
min: 0,
max: 100,
},
plotOptions: {
bar: {
borderRadius: 4,
borderRadiusApplication: 'end',
horizontal: false,
}
},
dataLabels: {
enabled: false
},
},
},
})