vue-apexcharts Brush chart not working in Vue3

Brush chart not working in Vue3

Open kalenpw opened this issue 2 years ago • 19 comments

I am using Vue3 with Vite and running into trouble getting a brush chart to work.

Gif of issue: as you can see the brush changing doesn't update the primary graph Peek 2021-07-07 20-18

I installed Apex via: npm install --save vue3-apexcharts and npm install --save apexcharts

I updated my main.js to look like this:

import { createApp } from 'vue'
import App from './App.vue'
import VueApexCharts from 'vue3-apexcharts'
import './index.css'

createApp(App).use(VueApexCharts).mount('#app')

I couldn't get Apex Charts working in a Code Sandbox, but here is a template which has all the requisite info (and doesn't work).

<template>
    <div id="wrapper">
        <div id="chart-line2">
            <apexchart
                type="line"
                height="230"
                :options="primaryOptions"
                :series="primarySeries"
            ></apexchart>
        </div>
        <div id="chart-line">
            <apexchart
                type="line"
                height="100"
                :options="mapOptions"
                :series="mapSeries"
            ></apexchart>
        </div>
    </div>
</template>
 
<script>
export default {
    name: "TestGraph",
    data: function () {
        let data = [
            [1327532400000, 135],
            [1327532400000, 155],
            [1327618800000, 135],
            [1327964400000, 155],
            [1328223600000, 165],
            [1328569200000, 150],
            [1328742000000, 180],
            [1330383600000, 145],
            [1330483600000, 145],
            [1330583600000, 145],
            [1330883600000, 145],
            [1331083600000, 145],
            [1331183600000, 145],
            [1331283600000, 145],
        ];

        return {
            primaryOptions: {
                chart: {
                    id: "chart2",
                    type: "line",
                    height: 230,
                    toolbar: {
                        autoSelected: "pan",
                        show: false,
                    },
                },
                colors: ["#546E7A"],

                dataLabels: {
                    enabled: false,
                },
                fill: {
                    opacity: 1,
                },

                xaxis: {
                    type: "datetime",
                    labels: {
                        datetimeFormatter: {
                            year: "yyyy-MM-dd",
                            month: "yyyy-MM-dd",
                            day: "yyyy-MM-dd",
                            hour: "yyyy-MM-dd",
                        },
                    },
                },
                title: {
                    text: "Dummy",
                    align: "center",
                },
            },
            // end primary options
            mapOptions: {
                chart: {
                    id: "chart1",
                    height: 130,
                    type: "area",
                    brush: {
                        target: "chart2",
                        enabled: true,
                    },
                    selection: {
                        enabled: true,
                        xaxis: {
                            min: new Date("24 Jan 2012").getTime(),
                            max: new Date("10 Mar 2012").getTime(),
                        },
                    },
                },
                colors: ["#008FFB"],

                xaxis: {
                    type: "datetime",
                    tooltip: {
                        enabled: false,
                    },
                },
                yaxis: {
                    tickAmount: 2,
                },
            },
            primarySeries: [
                {
                    data: data,
                },
            ],
            mapSeries: [
                {
                    data: data,
                },
            ],
        };
    },
};
</script>

Jul 08 '21 02:07 kalenpw

@kalenpw Did you find any solution for this? I have the same issue.

Jun 02 '22 10:06 Quasarman

@kalenpw

I'm having the same issue here. I've tried the fix explained here but it didn't work. I'll see if I can dig deeper this issue in the next days.

I higly doubt that I will find something useful...

Jun 23 '22 00:06 EmanueleCoppola

Arf, I was relying a lot on this brush feature but faced the same issue.

Sep 02 '22 16:09 Qualzz

Does any one managed to fix it?

Sep 16 '22 21:09 kozel-aliaksei

Does any one managed to fix it?

Oct 11 '22 03:10 GusMarroquin

Just came across the same. Too bad

Nov 18 '22 14:11 placid2000

Same problem too.

Jan 09 '23 13:01 anderson-lactec

I also encountered the same problem.

Jan 24 '23 13:01 Setomiro

Same problem...

May 04 '23 12:05 TedCermitech

Ran into this same problem but was able to create a workaround in the meantime by using @selection event from vue3-apexcharts and passing the xaxis min and max values from the selection through to the zoomX() function of the first chart.

e.g.

@selection="(brushChartContext, { xaxis }) => mainChartRef.zoomX(xaxis.min, xaxis.max)"