Apexcharts - Modelling multiple series (more than 2) with different y-axis scales

We've been trying to find a way to do this through Apexcharts.

We have multiple series with a shared x-axis (date), but different y-axis scales, which we're trying to normalize so we can show multiple data points together.

The only examples we can find for doing this have been supporting only 2 series at maximum: https://apexcharts.com/docs/chart-types/multiple-yaxis-scales/

Our series may have values like:

• [10,12,14,15,16]
• [0.3,0.4,0.6,0.7,0.4]
• [131,127,150,129,144]

We cannot have these sharing the same y-axis as then the 2nd series would look very squished. Somehow, we're trying to find a way to visually display all these 3 on the same graph in a way that the individual differences are still visible.

So really what we're doing is we're "normalizing" the different y-axis ranges, while still preserving the exact original value.

We're open to alternatives other than Apexcharts too.

Are you trying to plot two series on the same yaxis scale? if so here's a workaround modelling multiple series with two y-axis otherwise, if you're just trying to plot as many axes as series, here's an example modeling multiple series with an axis for each serie

First example :

var options = {
    series: [
        {
            name: "Serie 1",
            type: "line",
            data: [10,12,14,15,16]
        },
        {
            name: "Serie 2",
            type: "line",
            data: [0.3,0.4,0.6,0.7,0.4]
        },
        {
            name: "Serie 3",
            type: "line",
            data: [131,127,150,129,144]
        }
    ],
    chart: {
        height: 350,
        type: "line",
        stacked: false
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        width: 2
    },
    xaxis: {
        categories: [2009, 2010, 2011, 2012, 2013]
    },
    yaxis: [
        {
            seriesName: "Serie 1",
            min:0,
            max:200,
            axisTicks: {
                show: true
            },
            axisBorder: {
                show: true,
                color: "#008FFB"
            },
            labels: {
                style: {
                    colors: ["#008FFB"]
                }
            },
            title: {
                text: "Axe 1",
                style: {
                    color: "#008FFB"
                }
            },
            tooltip: {
                enabled: true
            }
        },
        {
            seriesName: "Serie 2",
            opposite: true,
            min: 0,
            max: 1,
            axisTicks: {
                show: true
            },
            axisBorder: {
                show: true,
                color: "#FEB019"
            },
            labels: {
                style: {
                    colors: ["#FEB019"]
                }
            },
            title: {
                text: "Axe 2",
                style: {
                    color: "#FEB019"
                }
            },
            tooltip: {
                enabled: true
            }
        },
        {
            seriesName: "Serie 3",
            min: 0,
            max: 200,
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: false
            },
            labels: {
                show:false,
            },
            title: {
                text: "",
            },
            tooltip: {
                enabled: false
            }
        }
    ],
    legend: {
        horizontalAlign: "left",
        offsetX: 40
    }
};

Second example :

var options = {
    series: [
        {
            name: "Serie 1",
            type: "line",
            data: [10,12,14,15,16]
        },
        {
            name: "Serie 2",
            type: "line",
            data: [0.3,0.4,0.6,0.7,0.4]
        },
        {
            name: "Serie 3",
            type: "line",
            data: [131,127,150,129,144]
        }
    ],
    chart: {
        height: 350,
        type: "line",
        stacked: false
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        width: 2
    },
    xaxis: {
        categories: [2009, 2010, 2011, 2012, 2013]
    },
    yaxis: [
        {
            seriesName: "Serie 1",
            axisTicks: {
                show: true
            },
            axisBorder: {
                show: true,
                color: "#008FFB"
            },
            labels: {
                style: {
                    colors: ["#008FFB"]
                }
            },
            title: {
                text: "Axe 1",
                style: {
                    color: "#008FFB"
                }
            },
            tooltip: {
                enabled: true
            }
        },
        {
            seriesName: "Serie 2",
            opposite: true,
            axisTicks: {
                show: true
            },
            axisBorder: {
                show: true,
                color: "#FEB019"
            },
            labels: {
                style: {
                    colors: ["#FEB019"]
                }
            },
            title: {
                text: "Axe 2",
                style: {
                    color: "#FEB019"
                }
            },
            tooltip: {
                enabled: true
            }
        },
        {
            seriesName: "Serie 3",
            axisTicks: {
                show: true
            },
            axisBorder: {
                show: true,
                color: "#008FFB"
            },
            labels: {
                style: {
                    colors: ["#008FFB"]
                }
            },
            title: {
                text: "Axe 3",
                style: {
                    color: "#008FFB"
                }
            },
            tooltip: {
                enabled: true
            }
        },
    ],
    legend: {
        horizontalAlign: "left",
        offsetX: 40
    }
};