Error on synchronized charts exemple

[dawadam]

Hi, This example doesn't work: https://apexcharts.com/vue-chart-demos/line-charts/syncing-charts/

The result is not synchronized.

I found generateDayWiseTimeSeries on another site (https://observablehq.com/@tmcw/using-apexcharts), but I think that's not the problem.

A complete vuejs 3 code:

<script lang="ts">

//serie generate
function generateDayWiseTimeSeries(baseval, count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
        var x = baseval;
        var y =
            Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

        series.push([x, y]);
        baseval += 86400000;
        i++;
    }
    return series;
}

export default {
    el: '#app',

    data() {
        return {

            series: [{
                data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
                    min: 10,
                    max: 60
                })
            }],
            chartOptions: {
                chart: {
                    id: 'fb',
                    group: 'social',
                    type: 'line',
                    height: 160
                },
                colors: ['#008FFB']
            },

            seriesLine2: [{
                data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
                    min: 10,
                    max: 30
                })
            }],
            chartOptionsLine2: {
                chart: {
                    id: 'tw',
                    group: 'social',
                    type: 'line',
                    height: 160
                },
                colors: ['#546E7A']
            },

            seriesArea: [{
                data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
                    min: 10,
                    max: 60
                })
            }],
            chartOptionsArea: {
                chart: {
                    id: 'yt',
                    group: 'social',
                    type: 'area',
                    height: 160
                },
                colors: ['#00E396']
            },

            seriesSmall: [{
                data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
                    min: 10,
                    max: 60
                })
            }],
            chartOptionsSmall: {
                chart: {
                    id: 'ig',
                    group: 'social',
                    type: 'area',
                    height: 160,
                    width: 300
                },
                colors: ['#008FFB']
            },

            seriesSmall2: [{
                data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
                    min: 10,
                    max: 60
                })
            }],
            chartOptionsSmall2: {
                chart: {
                    id: 'li',
                    group: 'social',
                    type: 'area',
                    height: 160,
                    width: 300
                },
                colors: ['#546E7A']
            },
        }

    },

}
</script>

<template>
    <div id="wrapper">
        <div id="chart-line">
            <apexchart type="line" height="160" :options="chartOptions" :series="series"></apexchart>
        </div>
        <div id="chart-line2">
            <apexchart type="line" height="160" :options="chartOptionsLine2" :series="seriesLine2"></apexchart>
        </div>
        <div id="chart-area">
            <apexchart type="area" height="160" :options="chartOptionsArea" :series="seriesArea"></apexchart>
        </div>
        <div class="columns">
            <div id="chart-small">
                <apexchart type="area" height="160" width="300" :options="chartOptionsSmall" :series="seriesSmall">
                </apexchart>
            </div>
            <div id="chart-small2">
                <apexchart type="area" height="160" width="300" :options="chartOptionsSmall2" :series="seriesSmall2">
                </apexchart>
            </div>
        </div>

    </div>
</template>

[dawadam]

It's mistake, seem working.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.