I have a graph of rows in a combined / combined chart type (row and slash), I want to define a fixed data scale for row and for slash, how do I set the default values?
<script>
var options = {
chart: {
height: 350,
type: 'line',
},
series: [{
name: 'Website Blog',
type: 'column',
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
}, {
name: 'Social Media',
type: 'line',
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
}],
stroke: {
width: [0, 4]
},
title: {
text: 'Traffic Sources'
},
// labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug","Sep", "Oct", "Nov", "Dec"],
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
xaxis: {
type: 'datetime'
},
yaxis: [{
title: {
text: 'Website Blog',
},
}, {
opposite: true,
title: {
text: 'Social Media'
}
}]
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
You can define the axis range by specifying yaxis.min
and yaxis.max
in the following way.
yaxis: [{
min: 100,
max: 1000,
title: {
text: 'Website Blog',
},
}, {
min: 10,
max: 200,
opposite: true,
title: {
text: 'Social Media'
}
}]