Problem with multiple YAxis

[ThoPO]

Hello,
I created a chart with two Y axes, but now the lines with the reference to the left Y axis are not displayed (TargetTime, CycleTime, ACTUAL_TIME)

Does anyone have an idea why this is so?

{ "debug": true, "annotations": { "yaxis": [], "xaxis": [], "points": [] }, "chart": { "animations": { "dynamicAnimation": { "enabled": false }, "enabled": false }, "id": "e654ea32bfe84e33afc26d2164c5ac24", "events": {} }, "colors": [ "#FF0000", "#333333", "#0000FF", "#95c11f" ], "dataLabels": { "enabled": false, "enabledOnSeries": [] }, "plotOptions": { "bar": { "horizontal": false, "borderRadius": 5, "borderRadiusApplication": "around", "borderRadiusWhenStacked": "all" } }, "series": [ { "data": [ { "x": "2024-02-27 EARLY", "y": 0 }, { "x": "2024-02-27 LATE", "y": 0 }, { "x": "2024-02-27 LATE", "y": 0 }, { "x": "2024-02-29 EARLY", "y": 0 }, { "x": "2024-02-29 LATE", "y": 0 }, { "x": "2024-02-29 LATE", "y": 0 } ], "name": "TargetTime", "type": "line" }, { "data": [ { "x": "2024-02-27 EARLY", "y": 37000 }, { "x": "2024-02-27 LATE", "y": 34000 }, { "x": "2024-02-27 LATE", "y": 37000 }, { "x": "2024-02-29 EARLY", "y": 34000 }, { "x": "2024-02-29 LATE", "y": 34000 }, { "x": "2024-02-29 LATE", "y": 37000 } ], "name": "CycleTime", "type": "line" }, { "data": [ { "x": "2024-02-27 EARLY", "y": 37000 }, { "x": "2024-02-27 LATE", "y": 37000 }, { "x": "2024-02-27 LATE", "y": 37000 }, { "x": "2024-02-29 EARLY", "y": 37000 }, { "x": "2024-02-29 LATE", "y": 37000 }, { "x": "2024-02-29 LATE", "y": 37000 } ], "name": "ACTUAL_TIME", "type": "line" }, { "data": [ { "x": "2024-02-27 EARLY", "y": 230 }, { "x": "2024-02-27 LATE", "y": 380 }, { "x": "2024-02-27 LATE", "y": 590 }, { "x": "2024-02-29 EARLY", "y": 445 }, { "x": "2024-02-29 LATE", "y": 30 }, { "x": "2024-02-29 LATE", "y": 315 } ], "name": "Quantity", "type": "column" } ], "stroke": { "colors": [ "#FF0000", "#333333", "#0000FF", "#95c11f" ], "dashArray": [ 0, 0, 0, 0 ], "show": true, "width": [ 3, 3, 3, 0 ] }, "yaxis": [ { "show": true, "showAlways": false, "showForNullSeries": true, "seriesName": "TargetTime", "opposite": false, "reversed": false, "logarithmic": false, "logBase": 10, "forceNiceScale": false, "max": 47000, "min": 0, "floating": false, "decimalsInFloat": 0, "labels": { "show": true, "minWidth": 0, "maxWidth": 160, "offsetX": 0, "offsetY": 0, "rotate": 0, "padding": 20, "style": { "colors": [ null, null, null, null, null, null, null, null, null, null, null ], "fontSize": "11px", "fontWeight": 400, "cssClass": "" } }, "axisBorder": { "show": false, "color": "#e0e0e0", "width": 1, "offsetX": 0, "offsetY": 0 }, "axisTicks": { "show": false, "color": "#e0e0e0", "width": 6, "offsetX": 0, "offsetY": 0 }, "title": { "text": "CycleTime[Millisecond]", "rotate": -90, "offsetY": 0, "offsetX": 0, "style": { "fontSize": "11px", "fontWeight": 900, "cssClass": "" } }, "tooltip": { "enabled": false, "offsetX": 0 }, "crosshairs": { "show": true, "position": "front", "stroke": { "color": "#b6b6b6", "width": 1, "dashArray": 0 } } }, { "show": false, "showAlways": false, "showForNullSeries": true, "seriesName": "CycleTime", "opposite": false, "reversed": false, "logarithmic": false, "logBase": 10, "forceNiceScale": false, "max": 47000, "min": 0, "floating": false, "decimalsInFloat": 0, "labels": { "show": true, "minWidth": 0, "maxWidth": 160, "offsetX": 0, "offsetY": 0, "rotate": 0, "padding": 20, "style": { "colors": [ null, null, null, null, null, null, null, null, null, null, null ], "fontSize": "11px", "fontWeight": 400, "cssClass": "" } }, "axisBorder": { "show": false, "color": "#e0e0e0", "width": 1, "offsetX": 0, "offsetY": 0 }, "axisTicks": { "show": false, "color": "#e0e0e0", "width": 6, "offsetX": 0, "offsetY": 0 }, "title": { "rotate": -90, "offsetY": 0, "offsetX": 0, "style": { "fontSize": "11px", "fontWeight": 900, "cssClass": "" } }, "tooltip": { "enabled": false, "offsetX": 0 }, "crosshairs": { "show": true, "position": "front", "stroke": { "color": "#b6b6b6", "width": 1, "dashArray": 0 } } }, { "show": false, "showAlways": false, "showForNullSeries": true, "seriesName": "ACTUAL_TIME", "opposite": false, "reversed": false, "logarithmic": false, "logBase": 10, "forceNiceScale": false, "max": 47000, "min": 0, "floating": false, "decimalsInFloat": 0, "labels": { "show": true, "minWidth": 0, "maxWidth": 160, "offsetX": 0, "offsetY": 0, "rotate": 0, "padding": 20, "style": { "colors": [ null, null, null, null, null, null, null, null, null, null, null ], "fontSize": "11px", "fontWeight": 400, "cssClass": "" } }, "axisBorder": { "show": false, "color": "#e0e0e0", "width": 1, "offsetX": 0, "offsetY": 0 }, "axisTicks": { "show": false, "color": "#e0e0e0", "width": 6, "offsetX": 0, "offsetY": 0 }, "title": { "rotate": -90, "offsetY": 0, "offsetX": 0, "style": { "fontSize": "11px", "fontWeight": 900, "cssClass": "" } }, "tooltip": { "enabled": false, "offsetX": 0 }, "crosshairs": { "show": true, "position": "front", "stroke": { "color": "#b6b6b6", "width": 1, "dashArray": 0 } } }, { "show": true, "showAlways": false, "showForNullSeries": true, "seriesName": "Quantity", "opposite": true, "reversed": false, "logarithmic": false, "logBase": 10, "forceNiceScale": false, "floating": false, "decimalsInFloat": 0, "labels": { "show": true, "minWidth": 0, "maxWidth": 160, "offsetX": 0, "offsetY": 0, "rotate": 0, "padding": 20, "style": { "colors": [ null, null, null, null, null, null, null, null, null, null, null ], "fontSize": "11px", "fontWeight": 400, "cssClass": "" } }, "axisBorder": { "show": false, "color": "#e0e0e0", "width": 1, "offsetX": 0, "offsetY": 0 }, "axisTicks": { "show": false, "color": "#e0e0e0", "width": 6, "offsetX": 0, "offsetY": 0 }, "title": { "text": "Quantity[Count]", "rotate": -90, "offsetY": 0, "offsetX": 0, "style": { "fontSize": "11px", "fontWeight": 900, "cssClass": "" } }, "tooltip": { "enabled": false, "offsetX": 0 }, "crosshairs": { "show": true, "position": "front", "stroke": { "color": "#b6b6b6", "width": 1, "dashArray": 0 } } } ], "dotNetObject": { "_id": 10, "_callDispatcher": { "_dotNetCallDispatcher": {}, "_byteArraysToBeRevived": {}, "_pendingDotNetToJSStreams": {}, "_pendingAsyncCalls": {}, "_nextAsyncCallId": 18 } }, "xaxis": { "convertedCatToNumeric": true } }

[rosco54]

Remove the entries with the duplicate X values, so that they're unique.

It looks like you're using some tool to generate your ApexCharts options, but you may be interested to know that the yaxis.seriesName option can now take an array of series names. This was a feature request to simplify the config but it also has the advantage that you can collapse any of those referenced series and the Y axis scale will remain visible until all of the referenced series have been collapsed. See below:

<!DOCTYPE html>
<html lang="en">

<head>

  <script src="apexcharts.js/dist/apexcharts.js"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-10">
        <div id="chart"></div>
      </div>
    </div>
  </div>

  <script>

var options = {
annotations: {
    yaxis: [],
    xaxis: [],
    points: []
},
chart: {
    animations: {
        dynamicAnimation: {
            enabled: false
        },
        enabled: false
    },
    id: "e654ea32bfe84e33afc26d2164c5ac24",
    events: {
    }
},
colors: ["#FF0000", "#333333", "#0000FF", "#95c11f" ],
dataLabels: {
    enabled: false,
    enabledOnSeries: []
},
plotOptions: {
    bar: {
        horizontal: false,
        borderRadius: 5,
        borderRadiusApplication: "around",
        borderRadiusWhenStacked: "all"
    }
},
series: [
    {
        data: [
        {x: "2024-02-27 EARLY", y: 0},
        {x: "2024-02-27 LATE", y: 0 },
        {x: "2024-02-29 EARLY", y: 0 },
        {x: "2024-02-29 LATE", y: 0 }
        ],
        name: "TargetTime",
        type: "line"
    },
    {
        data: [
        {x: "2024-02-27 EARLY", y: 34000 },
        {x: "2024-02-27 LATE", y: 34000 },
        {x: "2024-02-29 EARLY", y: 34000 },
        {x: "2024-02-29 LATE", y: 34000 }
        ],
        name: "CycleTime",
        type: "line" },
    {
        data: [
        {x: "2024-02-27 EARLY", y: 37000 },
        {x: "2024-02-27 LATE", y: 37000 },
        {x: "2024-02-29 EARLY", y: 37000 },
        {x: "2024-02-29 LATE", y: 37000 }
        ],
        name: "ACTUAL_TIME",
        type: "line"
    },
    {
        data: [
        {x: "2024-02-27 EARLY", y: 230 },
        {x: "2024-02-27 LATE", y: 590 },
        {x: "2024-02-29 EARLY", y: 445 },
        {x: "2024-02-29 LATE", y: 315 }
        ],
        name: "Quantity",
        type: "column"
    }
],
stroke: {
    colors: [ "#FF0000", "#333333", "#0000FF", "#95c11f" ],
    dashArray: [ 0, 0, 0, 0 ],
    show: true,
    width: [ 3, 3, 3, 0 ]
},
yaxis: [
    {
        show: true,
        showAlways: false,
        showForNullSeries: true,
        seriesName: ["TargetTime","CycleTime","ACTUAL_TIME"],
        opposite: false,
        reversed: false,
        logarithmic: false,
        logBase: 10,
        forceNiceScale: false,
        max: 47000,
        min: 0,
        floating: false,
        decimalsInFloat: 0,
        labels: {
            show: true,
            minWidth: 0,
            maxWidth: 160,
            offsetX: 0,
            offsetY: 0,
            rotate: 0,
            padding: 20,
            style: {
                colors: [ null, null, null, null, null, null, null, null, null, null, null ],
                fontSize: "11px",
                fontWeight: 400,
                cssClass: ""
            }
        },
        axisBorder: {
            show: false,
            color: "#e0e0e0",
            width: 1,
            offsetX: 0,
            offsetY: 0
        },
        axisTicks: {
            show: false,
            color: "#e0e0e0",
            width: 6,
            offsetX: 0,
            offsetY: 0
        },
        title: {
            text: "CycleTime[Millisecond]",
            rotate: -90,
            offsetY: 0,
            offsetX: 0,
            style: {
                fontSize: "11px",
                fontWeight: 900,
                cssClass: ""
            }
        },
        tooltip: {
            enabled: false,
            offsetX: 0
        },
        crosshairs: {
            show: true,
            position: "front",
            stroke: {
                color: "#b6b6b6",
                width: 1,
                dashArray: 0
            }
        }
    },
    {
        show: true,
        showAlways: false,
        showForNullSeries: true,
        seriesName: "Quantity",
        opposite: true,
        reversed: false,
        logarithmic: false,
        logBase: 10,
        forceNiceScale: false,
        floating: false,
        decimalsInFloat: 0,
        labels: {
            show: true,
            minWidth: 0,
            maxWidth: 160,
            offsetX: 0,
            offsetY: 0,
            rotate: 0,
            padding: 20,
            style: {
                colors: [ null, null, null, null, null, null, null, null, null, null, null ],
                fontSize: "11px",
                fontWeight: 400,
                cssClass: ""
            }
        },
        axisBorder: {
            show: false,
            color: "#e0e0e0",
            width: 1,
            offsetX: 0,
            offsetY: 0
        },
        axisTicks: {
            show: false,
            color: "#e0e0e0",
            width: 6,
            offsetX: 0,
            offsetY: 0
        },
        title: {
            text: "Quantity[Count]",
            rotate: -90,
            offsetY: 0,
            offsetX: 0,
            style: {
                fontSize: "11px",
                fontWeight: 900,
                cssClass: ""
            }
        },
        tooltip: {
            enabled: false,
            offsetX: 0
        },
        crosshairs: {
            show: true,
            position: "front",
            stroke: {
                color: "#b6b6b6",
                width: 1,
                dashArray: 0
            }
        }
    }
],
xaxis: {
    convertedCatToNumeric: true
}
}

var chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();


  </script>

</body>

</html>