• What is a multi-axis chart?
• Basic example with 2 Y-axis
• 3 data columns with 2 Scales
  • How to associate a series with a Y-axis?
• Linear and Log Scales on the same chart

Multiple Y-Axis & Scales

What is a multi-axis chart? #

It is a kind of chart where you have more than 1 y-axis to be rendered on the same graph. When you have a significant difference in value ranges, multi-axis charts allow you to plot multiple data sets with different types of units.

You can draw separate y-axis for each scale, or have multiple series on the same scale. We will explore all the different options on how to handle different scales on the same chart.

Basic example with 2 Y-axis #

We will start by creating a basic example with 2 Y-axis drawn on the left and right side of the chart area. The main configuration to take care of is the options.yaxis property. For multiple scales chart, the y-axis property will accept array instead of object

\koolreport\apexcharts\ComboChart::create(array(
    ...
    "columns" => array(
        "Year" => [
        ],
        "Income" => [
            "chartType" => "column"
        ],
        "Cashflow" => [
            "chartType" => "line"
        ],
    ),
    "options" => [
        'yaxis' => [
            [
                'seriesName' => 'Income',
                'axisTicks | show' => true,
                'axisBorder' => [
                    'show' => true,
                    'color' => '#008FFB'
                ],
                'labels | style | colors' => '#008FFB',
                'title' => [
                    'text' => 'Income (thousand crores)',
                    'style | color' => '#008FFB',
                ],
                'tooltip | enabled' => true,
            ],
            [
                'seriesName' => 'Cashflow',
                'opposite' => true,
                'axisTicks | show' => true,
                'axisBorder' => [
                    'show' => true,
                    'color' => '#00E396'
                ],
                'labels | style | colors' => '#00E396',
                'title' => [
                    'text' => 'Operating Cashflow (thousand crores)',
                    'style | color' => '#00E396',
                ]
            ],
        ]
    ],

That’s it. ApexCharts will autoScale the chart for 2 Y-axis as we have provided 2 objects in the array. Note that, the array index matches the same index in the columns array starting from the second column, i.e the first data one, after the first column, i.e the label one.

When you provide an array in yaxis instead of object, ApexCharts automatically scales the datasets using auto-generated min/max values.
If you don’t want this behavior, you can target a single scale by providing seriesName: 'Name' in the yaxis to target that dataset’s scale.

3 data columns with 2 Scales #

We will add 1 more series in the chart which makes our chart with 3 series. We will draw 2 Y-axis. So we will target same scale for 2 series (columns) while the remaining scale for the other series (line).

How to associate a series with a Y-axis? #

By default, each index of Y-axis corresponds to the index of series. But, if you want to associate a series with a y-axis, you can target by specifying yaxis.seriesName when building y-axes array.

\koolreport\apexcharts\ComboChart::create(array(
    ...
    "columns" => array(
        "Year" => [
        ],
        "TEAM A" => [
            "chartType" => "column"
        ],
        "TEAM B" => [
            "chartType" => "line"
        ],
        "TEAM C" => [
            "chartType" => "area"
        ],
    ),
    "options" => [
        'yaxis' => [
            [
                'seriesName' => 'TEAM A',
            ],
            [
                'seriesName' => 'TEAM A',
                'show' => false,
            ],
            [
                'seriesName' => 'TEAM C',
                'opposite' => true,
            ],
        ]
    ],

In the above code, series TEAM A binds to both the first and second yaxis scales by seriesName property while series TEAM B binds to the second yaxis scale due to their indexes. We then hide the second scale because the first and second scales are identical.

Linear and Log Scales on the same chart #

A primary reason to utilize logarithmic scales in graphs is to react to skewness towards large numbers; i.e., cases in which one or a couple of data-points are substantially bigger than the main part of the data. In the below example, we will mix linear scale with a logarithmic scale.

    "options" => [
        'yaxis' => [
            [
                'seriesName' => 'TEAM A',
            ],
            [
                'seriesName' => 'TEAM A',
                'logarithmic' => true,
                'opposite' => true,
            ],
        ]
    ], 

By setting the yaxis[].logarithmic option to TRUE, you can turn that scale into a log-scale

An example of a linear scale mixed with log scale in the same chart

In the above example, the same dataset is used for both the series. Visually, you can see the difference easily how the logarithmic series grow towards the larger numbers in a different manner unlike the linear scale.