Search code examples
javascriptapexcharts

How to Set a Fixed Range of Data for a Mixed Type Chart


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?

Here is my existing code.

<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>

Solution

  • 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'
        }
    }]