apexcharts / vue3-apexcharts

📊 Vue-3 component for ApexCharts
MIT License
313 stars 35 forks source link

Error on synchronized charts exemple #90

Open dawadam opened 10 months ago

dawadam commented 10 months ago

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 commented 10 months ago

It's mistake, seem working.

github-actions[bot] commented 2 months ago

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.