📊 Vue.js component for ApexCharts

Last update: Aug 12, 2022

License build ver

Vue.js wrapper for ApexCharts to build interactive visualizations in vue.

Download and Installation

Installing via npm
npm install --save apexcharts
npm install --save vue-apexcharts

Usage

import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

Vue.component('apexchart', VueApexCharts)

To create a basic bar chart with minimal configuration, write as follows:

<template>
   <div>
     <apexchart width="500" type="bar" :options="chartOptions" :series="series"></apexchart>
   </div>
</template>
export default {
    data: function() {
      return {
        chartOptions: {
          chart: {
            id: 'vuechart-example'
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
          }
        },
        series: [{
          name: 'series-1',
          data: [30, 40, 35, 50, 49, 60, 70, 91]
        }]
      }
    },
};

This will render the following chart

How do I update the chart?

Simple! Just change the series or any option and it will automatically re-render the chart.
Click on the below example to see this in action

<template>
   <div class="app">
     <apexchart width="550" type="bar" :options="chartOptions" :series="series"></apexchart>
     <div>
       <button @click="updateChart">Update!</button>
    </div>
   </div>

</template>
export default {
    data: function() {
      return {
        chartOptions: {
          chart: {
            id: 'vuechart-example',
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
          },
        },
        series: [{
          name: 'series-1',
          data: [30, 40, 45, 50, 49, 60, 70, 81]
        }]
      }
    },
    methods: {
      updateChart() {
        const max = 90;
        const min = 20;
        const newData = this.series[0].data.map(() => {
          return Math.floor(Math.random() * (max - min + 1)) + min
        })

        const colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']

        // Make sure to update the whole options config and not just a single property to allow the Vue watch catch the change.
        this.chartOptions = {
          colors: [colors[Math.floor(Math.random()*colors.length)]]
        };
        // In the same way, update the series option
        this.series = [{
          data: newData
        }]
      }
    }
};

Important: While updating the options, make sure to update the outermost property even when you need to update the nested property.

✅ Do this

this.chartOptions = {...this.chartOptions, ...{
    xaxis: {
        labels: {
           style: {
             colors: ['red']
           }
        }
    }
}}

❌ Not this

this.chartOptions.xaxis = {
    labels: {
        style: {
          colors: ['red']
        }
    }
}}

Props

Prop Type Description
series* Array The series is an array which accepts an object in the following format. To know more about the format of dataSeries, checkout Series docs on the website.
type* String line, area, bar, pie, donut, scatter, bubble, heatmap, radialBar, candlestick
width Number/String Possible values for width can be 100% or 400px or 400
height Number/String Possible values for height can be 100% or 300px or 300
options Object The configuration object, see options on API (Reference)

Methods

You don't actually need to call updateSeries() or updateOptions() manually. Changing the props will automatically update the chart. You only need to call these methods to update the chart forcefully.

Method Description
updateSeries Allows you to update the series array overriding the existing one
updateOptions Allows you to update the configuration object
toggleSeries Allows you to toggle the visibility of series programatically. Useful when you have custom legend.
appendData Allows you to append new data to the series array.
addText The addText() method can be used to draw text after chart is rendered.
addXaxisAnnotation Draw x-axis annotations after chart is rendered.
addYaxisAnnotation Draw y-axis annotations after chart is rendered.
addPointAnnotation Draw point (xy) annotations after chart is rendered.

How to call the methods mentioned above?

<template>
  <div class="example">
    <apexchart ref="demoChart" width="500" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
  functionName: function() {
    this.$refs.demoChart.updateOptions({ colors: newColors })
  },
</script>

How to call methods of ApexCharts without referencing the chart element?

Sometimes, you may want to call methods of the core ApexCharts library from some other place, and you can do so on this.$apexcharts global variable directly. You need to target the chart by chart.id while calling this method

Example

this.$apexcharts.exec('vuechart-example', 'updateSeries', [{
  data: [40, 55, 65, 11, 23, 44, 54, 33]
}])

In the above method, vuechart-example is the ID of chart, updateSeries is the name of the method you want to call and the third parameter is the new Series you want to update.

More info on the .exec() method can be found here

All other methods of ApexCharts can be called the same way.

What's included

The repository includes the following files and directories.

vue-apexcharts/
├── dist/
│   └── vue-apexcharts.js
└── src/
    ├── ApexCharts.component.js
    ├── Utils.js
    └── index.js

Running the examples

Basic Examples are included to show how to get started using ApexCharts with Vue easily.

To run the examples,

cd example
npm install
npm run serve

Development

Install dependencies

npm install

Bundling

npm run build

Supporting ApexCharts

ApexCharts is an open source project.
You can help by becoming a sponsor on Patreon or doing a one time donation on PayPal

Become a Patron

License

Vue-ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.

GitHub

https://github.com/apexcharts/vue-apexcharts
Comments
  • 1. Updating annotations is broken since 2.1.6

    We've got a chart options object:

    this.chartTotal.options = { ... annotations: { position: 'front', points: [] }, ... }

    Prior to 2.1.6 we could add annotations dynamically using this.chartTotal.options.annotations.points.push(...)

    this is not working anymore.

    Reviewed by johuhype at 2018-10-29 10:19
  • 2. [Vue-ApexCharts] Strange behavior of animation in bar chart

    Hello! i'm using:

    • "vue": "^2.5.17",
    • "vue-apexcharts": "^1.1.1",

    And I have strange behavior of animation in bar chart on initial load if series: [ { data: [] } ] is empty. At the moment when I initial chart object I do not have data for series and categories

     options: {
            chart: {
              id: "isChart",
              dropShadow: { enabled: true, top: 11,  left: 0,  blur: 3,  opacity: 0.5 },
              animations: { enabled: true, easing: "linear", speed: 1500,
                animateGradually: { enabled: true, delay: 1500 },
                dynamicAnimation: { enabled: true, speed: 1500 }
              }
            },
            xaxis: { categories: [] },
          },
          series: [ { name: "s1", data: [] } ]
    

    Then I make request to backend and fill series data and categories

    axios.post("http://mydomain/loadData")
            .then(response => {
              response.data.forEach((element, index) => {
                this.numX.push(index + 1);
                this.numY.push(element.data);
              });
              this.series = [ { data: this.numY }  ];
              this.options = {  xaxis: {  categories: this.numX  }  };
            })
            .catch(error => {
              console.log(error);
            });
    

    And on first time animations seems doesn't work and chart appears instantly. If i repeat this action(at this moment series data already filled with some data) animation will work correctly.

    This behiavor only with bar chart. i try for "area" and "line" charts and animation works correctly even on initial load when series data is emty

    Reviewed by vystepanenko at 2018-09-13 14:48
  • 3. "u.parser.draw is undefined"

    Using Vue Cli 3, the basic GitHub example generates the following error:

    TypeError: "u.parser.draw is undefined"

    And no chart displays. Am I missing something?

    Update: The chart example works in the root of my project but not inside a component that is being used as a router-view. Unsure if that's relevant but just in case.

    Reviewed by siulca at 2018-10-07 22:13
  • 4. Create vue 3 component

    I converted this to a vue 3 component for my use and when you decide to create one I thought I'd give you a head start. Seems to work fine for me but it has not gone through any rigorous testing...

    Also note I commented out the event listeners propagating - I couldn't figure it out but was not using it myself...

    const apexchart = defineComponent({
                props: {
                    options: {
                        type: Object
                    },
                    type: {
                        type: String
                    },
                    series: {
                        type: Array,
                        required: true,
                        default: () => []
                    },
                    width: {
                        default: '100%'
                    },
                    height: {
                        default: 'auto'
                    }
                },
                setup(props, ctx) {
                    const el = ref(null);
                    const chart = ref(null);
    
                    const isObject = (item) => {
                        return (
                            item && typeof item === 'object' && !Array.isArray(item) && item != null
                        )
                    };
    
                    const extend = (target, source) => {
                        if (typeof Object.assign !== 'function') {
                            (function () {
                                Object.assign = function (target) {
                                    // We must check against these specific cases.
                                    if (target === undefined || target === null) {
                                        throw new TypeError('Cannot convert undefined or null to object')
                                    }
    
                                    let output = Object(target)
                                    for (let index = 1; index < arguments.length; index++) {
                                        let source = arguments[index]
                                        if (source !== undefined && source !== null) {
                                            for (let nextKey in source) {
                                                if (source.hasOwnProperty(nextKey)) {
                                                    output[nextKey] = source[nextKey]
                                                }
                                            }
                                        }
                                    }
                                    return output
                                }
                            })()
                        }
    
                        let output = Object.assign({}, target)
                        if (isObject(target) && isObject(source)) {
                            Object.keys(source).forEach((key) => {
                                if (isObject(source[key])) {
                                    if (!(key in target)) {
                                        Object.assign(output, {
                                            [key]: source[key]
                                        })
                                    } else {
                                        output[key] = extend(target[key], source[key])
                                    }
                                } else {
                                    Object.assign(output, {
                                        [key]: source[key]
                                    })
                                }
                            })
                        }
                        return output
                    };
    
                    const init = () => {
                        const newOptions = {
                            chart: {
                                type: props.type || props.options.chart.type || 'line',
                                height: props.height,
                                width: props.width,
                                events: {}
                            },
                            series: props.series
                        }
    
                        // Object.keys(ctx.listeners).forEach((evt) => {
                        //     newOptions.chart.value.events[evt] = ctx.listeners[evt];
                        // });
    
                        const config = extend(props.options, newOptions);
                        chart.value = new ApexCharts(el.value, config)
                        return chart.value.render()
                    };
    
                    const refresh = () => {
                        destroy();
                        return init();
                    };
    
                    const destroy = () => {
                        chart.value.destroy()
                    };
    
                    const updateSeries = (newSeries, animate) => {
                        return chart.value.updateSeries(newSeries, animate)
                    };
    
                    const updateOptions = (newOptions, redrawPaths, animate, updateSyncedCharts) => {
                        return chart.value.updateOptions(newOptions, redrawPaths, animate, updateSyncedCharts)
                    };
    
                    const toggleSeries = (seriesName) => {
                        return chart.value.toggleSeries(seriesName)
                    };
    
                    const showSeries = (seriesName) => {
                        chart.value.showSeries(seriesName)
                    };
    
                    const hideSeries = (seriesName) => {
                        chart.value.hideSeries(seriesName)
                    };
    
                    const appendSeries = (newSeries, animate) => {
                        return chart.value.appendSeries(newSeries, animate)
                    };
    
                    const resetSeries = () => {
                        chart.value.resetSeries()
                    };
    
                    const toggleDataPointSelection = (seriesIndex, dataPointIndex) => {
                        chart.value.toggleDataPointSelection(seriesIndex, dataPointIndex)
                    };
    
                    const appendData = (newData) => {
                        return chart.value.appendData(newData)
                    };
    
                    const addText = (options) => {
                        chart.value.addText(options)
                    };
    
                    const dataURI = () => {
                        return chart.value.dataURI()
                    };
    
                    const setLocale = (localeName) => {
                        return chart.value.setLocale(localeName)
                    };
    
                    const addXaxisAnnotation = (options, pushToMemory) => {
                        chart.value.addXaxisAnnotation(options, pushToMemory)
                    };
    
                    const addYaxisAnnotation = (options, pushToMemory) => {
                        chart.value.addYaxisAnnotation(options, pushToMemory)
                    };
    
                    const addPointAnnotation = (options, pushToMemory) => {
                        chart.value.addPointAnnotation(options, pushToMemory)
                    };
    
                    const removeAnnotation = (id, options) => {
                        chart.value.removeAnnotation(id, options)
                    };
    
                    const clearAnnotations = () => {
                        chart.value.clearAnnotations()
                    };
    
                    onMounted(() => {
                        init();
                    });
    
                    onBeforeUnmount(() => {
                        if (!chart.value) {
                            return
                        }
                        destroy()
                    });
    
                    watch(() => props.options, () => {
                        if (!chart.value && props.options) {
                            init()
                        } else {
                            chart.value.updateOptions(props.options)
                        }
                    });
    
                    watch(() => props.series, () => {
                        if (!chart.value && props.series) {
                            init()
                        } else {
                            chart.value.updateSeries(props.series)
                        }
                    });
    
                    watch(() => props.type, () => {
                        refresh();
                    });
    
                    watch(() => props.width, () => {
                        refresh();
                    });
    
                    watch(() => props.height, () => {
                        refresh();
                    });
    
                    return () =>
                        h("div", {
                            ref: el
                        });
                },
            });
    
    Reviewed by mika76 at 2020-03-26 19:29
  • 5. chartoptions not updating through updateOptions(chartOptions1,false,true);

    i am implementing chart drilldown so updating option from chartOptions1 to chartOptions2 not working properly. data(xaxis.categories) gets updated but colors and other chart styling not updating. same while going backwards from chartOptions2 to chartOptions1 data gets updated but actual chart options not updating. i am using this.$refs.chart2.updateOptions(this.chartOptions1,false,true); looks like it's not reactive? do we need to clear chartoption before changing? can anyone help?

    Reviewed by sanyam53 at 2019-03-11 09:48
  • 6. Problem with multiple yAxis & toggleSeries()

    Demo: https://codepen.io/lukaszflorczak/pen/yrpWgZ

    I have a chart like that in my project. I have 6 series of data: 1-4 use common y-axis on the left and 5-6 use common y-axis on the right. I also have buttons to disable/enable each series.

    const initialYaxis = [
    	{ seriesName: 'wideContacts', show: true },
    	{ seriesName: 'wideContacts', show: false },
    	{ seriesName: 'wideContacts', show: false },
    	{ seriesName: 'wideContacts', show: false },
    	{ seriesName: 'netValue', opposite: true, show: true },
    	{ seriesName: 'netValue', opposite: true, show: false }
    ]
    

    Problem 1

    If I disable for example the first series I need to change params of y-axis for series 2-4 because the first series y-axis is not visible. In the demo, you can see prepareYaxis() method for this. And it looks that it works. Unfortunately, if I disable any series I can't enable it again.

    In this issue: https://github.com/apexcharts/apexcharts.js/issues/366 I got a suggestion to use showAlways option, but I'm doing something wrong or it doesn't work when I toggle the data series.

    I tried to use render() method, but it doesn't work (exist?). In the local environment, I use [email protected] and [email protected].

    How should I do charts like that? Where is the problem?


    Problem 2

    It's not so important for me at this moment, and maybe it's related to problem 1, but... At the beginning I see all data in the tooltip together:

    Zrzut ekranu 2019-04-17 o 06 52 51

    But if I disable one of the series I see the separate tooltip for each chart/series:

    Zrzut ekranu 2019-04-17 o 06 52 33

    I mentioned it here: https://github.com/apexcharts/apexcharts.js/issues/367 before.


    PS. I hope it's not a problem that I start a new issue. But I thought it would be better to start a new one in vue-apexcharts repo because maybe some of those problems are specific just for the Vue version.

    Reviewed by lukaszflorczak at 2019-04-17 05:02
  • 7. TypeError: this.chart.render is not a function

    I'm get the following error in browser console:

    TypeError: ApexCharts.merge is not a function
        at VueComponent.init (vue-apexcharts.js:84)
        at VueComponent.mounted (vue-apexcharts.js:36)
    

    I'm using the latest release, and have tried with the latest ApexCharts as well as ^3.0.0 as dictated by the peer dependency.

    I can get around this issue by modifying ApexCharts.component.js line one to be:

    import ApexCharts from '../../apexcharts/src/apexcharts';

    And then also importing vue-apexcharts directly from src rather than dist in my component:

    import VueApexCharts from '../../node_modules/vue-apexcharts/src';

    Reviewed by Dan-Shields at 2019-02-23 02:13
  • 8. Updating yaxis min and max

    I'm trying to update the yaxis min and max through the options object

    <apexcharts type="line" :options="options" :series="series"></apexcharts>
    
    data() {
      return {
        options: {
          yaxis: {
            min: undefined,
            max: undefined,
          },
        },
      }
    }
    
    yRangeChanged(min, max) {
      this.options.yaxis.min = min;
      this.options.yaxis.max = max;
     }
    

    But this doesn't work. The object is correctly updated, but the Y axis range stays the same. If I manually set yaxis.min and yaxis.max to begin with, the graph displays correctly. I noticed a commit which added a Yaxis prop, but it looks like this was taken out straight away.

    Am I missing something when trying to update these values?

    Reviewed by microwavesafe at 2018-10-18 12:44
  • 9. Breakage of series management with v1.4.10+

    There is an error using vue-apexcharts with v.1.4.10 and onward (tested till 1.4.12), where the data the updating of series just throw a typeError.

    vue.runtime.esm.js?2b0e:1737 TypeError: Cannot read property 'min' of undefined
        at eval (apexcharts.min.js?3d1e:1)
        at Array.map (<anonymous>)
        at i.value (apexcharts.min.js?3d1e:1)
        at i.value (apexcharts.min.js?3d1e:1)
        at VueComponent.$watch.series (vue-apexcharts.js?1321:53)
        at Watcher.run (vue.runtime.esm.js?2b0e:3229)
        at flushSchedulerQueue (vue.runtime.esm.js?2b0e:2977)
        at Array.eval (vue.runtime.esm.js?2b0e:1833)
        at flushCallbacks (vue.runtime.esm.js?2b0e:1754)
    
    apexcharts.min.js?3d1e:1 Uncaught (in promise) TypeError: Cannot read property 'result' of undefined
        at e.value (apexcharts.min.js?3d1e:1)
        at eval (apexcharts.min.js?3d1e:1)
        at Array.map (<anonymous>)
        at i.value (apexcharts.min.js?3d1e:1)
        at eval (apexcharts.min.js?3d1e:1)
        at new Promise (<anonymous>)
        at i.value (apexcharts.min.js?3d1e:1)
        at eval (apexcharts.min.js?3d1e:1)
        at new Promise (<anonymous>)
        at i.value (apexcharts.min.js?3d1e:1)
    
    Reviewed by arkhenstone at 2018-09-11 07:49
  • 10. apexcharts.min.js?3d1e:6 Uncaught (in promise) TypeError: Cannot read property 'indexOf' of undefined

    Hi Guys,

    I have been banging my head against this for a while now.

    I am pulling data in from an API and updating the charge on the fly

    <vue-apex-charts type="area" height="350" :options="chartOptions" :series="series" ></vue-apex-charts>

    Here is the output for the series

    console.log(JSON.stringify(series))
    
    [{"name":"Testogen","data":[108,107,126,121,42,23,27,23,35,48,36,38,37,34,0,0,0,0,0,0,0,0,0,0]},{"name":"Viasil","data":[1,1,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},{"name":"Blackwolf","data":[12,15,16,10,7,1,7,0,4,8,10,10,7,5,0,0,0,0,0,0,0,0,0,0]},{"name":"PhenGold","data":[2,3,1,3,1,4,0,2,1,1,3,3,2,15,0,0,0,0,0,0,0,0,0,0]},{"name":"BrutalForce ","data":[30,46,38,30,21,10,12,12,25,47,14,7,17,21,0,0,0,0,0,0,0,0,0,0]},{"name":"MaleExtra GBP","data":[0,2,0,0,0,0,0,1,0,0,2,1,0,3,0,0,0,0,0,0,0,0,0,0]},{"name":"Immune Defence ","data":[0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0]}]
    

    Here is the output for the series

    console.log(JSON.stringify(this.chartOptions))
    
    {"grid":{"show":true,"padding":{"left":0,"right":0},"borderColor":"rgba(0,0,0,0.1)"},"tooltip":{"theme":"dark"},"chart":{"stacked":true,"toolbar":{"show":false}},"colors":["#2aae7d","#101010","#c0af92","#000000","#004168","#4f4e4e","#225b41"],"fill":{"type":"solid","color":["#2aae7d","#101010","#c0af92","#000000","#004168","#4f4e4e","#225b41"]},"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":0},"markers":{"size":0},"xaxis":{"categories":["23 Hours Ago","22 Hours Ago","21 Hours Ago","20 Hours Ago","19 Hours Ago","18 Hours Ago","17 Hours Ago","16 Hours Ago","15 Hours Ago","14 Hours Ago","13 Hours Ago","12 Hours Ago","11 Hours Ago","10 Hours Ago","9 Hours Ago","8 Hours Ago","7 Hours Ago","6 Hours Ago","5 Hours Ago","4 Hours Ago","3 Hours Ago","2 Hours Ago","1 Hour Ago","Last Hour"],"show":false,"labels":{"show":false},"convertedCatToNumeric":true},"yaxis":{"labels":{"style":{"cssClass":"text-muted fill-color"}}}}
    

    I feel like im missing something obvious but I cannot figure it out.

    Screenshots:

    Screenshot 2020-11-17 at 19 31 22 Screenshot 2020-11-17 at 19 31 40

    Any help would be appreciated.

    Reviewed by andyslack at 2020-11-17 18:32
  • 11. how to change width of chart?

    i'm trying to change width of chart, but it doesn't effect.

    i used width porp like this:

    <vue-apex-charts width="100%" type="line" :options="charts.income.options" series="charts.income.series"/>
    

    and i used width like this, but it doesn't effect too:

      charts: {
                        income: {
                            options: {
                                chart: {
                                    toolbar: {
                                        show: false
                                    },
                                    width: '100%'
                                },
                                fontFamily: 'Vazir, Arial, sans-serif',
                                xaxis: {
                                    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
                                },
                                tooltip: {
                                    style: {
                                        fontFamily: 'Vazir'
                                    }
                                }
                            },
                            series: [{
                                name: 'series-1',
                                data: [30, 40, 45, 50, 49, 60, 70, 91]
                            }]
                        }
                    },
    
    
    Reviewed by mortezasabihi at 2019-08-23 11:57
  • 12. ToggleSeries does not work when using the radar chart type

    I have implemented several types of graphs and customized the legend, with the type is "bar" it works correctly, but when I use a type "radar" the toggle only hides it and does not show it again.

    I implemented toggle as follows: this.$refs.demoChart.toggleSeries(nameSeries)

    Reviewed by maritzab1902 at 2022-08-06 11:49
  • 13. Uncaught (in promise) TypeError: Cannot read properties of null (reading 'length')

    I have no clue as to how this error is spamming my logs, Any one had this before?

    Apex charts is loaded in an SVG as custom component (foreign object)

      <g :transform="'translate(0 ,0)'">
                <foreignObject
                    :key="item.id"
                    :width="item.width"
                    :height="item.height"
                    :x="item.x" :y="item.y"
                               v-for="item in items">
                  <component :item=item :key="item.id" :is="item.componentType"/>
                </foreignObject>
                ``` 
    
    
    
    ```html
     <apexchart
            class="oee-doughnut"
            type="radialBar"
            height="97px"
            width="64px"
            :options="getOptions"
            :series="getOeeLast()"/>
    
     getOptions() {
          return {
            colors: ['#FFFF'],
            chart: {
              type: "radialBar",
              width: "64px",
              height: "97px",
              offsetX: -3,
              offsetY: 0,
              id: this.item.id
            },
            plotOptions: {
              radialBar: {
                hollow: {
                  size: "40%"
                },
                dataLabels: {
                  showOn: "always",
                  name: {
                    offsetY: -10,
                    show: false,
                    color: "black",
                    fontSize: "12px"
                  },
                  value: {
                    offsetY: 5,
                    color: "black",
                    fontWeight: 700,
                    fontSize: "12",
                    show: true
                  }
                },
              },
    
            },
            labels: ["oee"],
          };
    
        }
      },
      methods: {
        getOeeLast() {
          return [80]
        }
      },
    
    Uncaught (in promise) TypeError: Cannot read properties of null (reading 'length')
        at Function.value (apexcharts.min.js?3d1e:6:1)
        at t.value (apexcharts.min.js?3d1e:6:1)
        at i.value (apexcharts.min.js?3d1e:6:1)
        at i.value (apexcharts.min.js?3d1e:6:1)
        at t.value (apexcharts.min.js?3d1e:6:1)
        at t.value (apexcharts.min.js?3d1e:14:1)
        at t.eval (apexcharts.min.js?3d1e:6:1)
        at eval (apexcharts.min.js?3d1e:14:1)
        at new Promise (<anonymous>)
        at t.value (apexcharts.min.js?3d1e:14:1)
        ```` 
    Reviewed by riksnelders at 2022-07-27 10:01
  • 14. Unsupported platform for fsevents

    I am using a linux OS with node version 14.9.0 and npm version 6.14.8 , and I am not able to install vuex-apexcharts. When trying to install it, the following error arises .

            
            npm ERR! notsup Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
            npm ERR! notsup Valid OS:    darwin
            npm ERR! notsup Valid Arch:  any
            npm ERR! notsup Actual OS:   linux
            npm ERR! notsup Actual Arch: x64
    
    Reviewed by berni23 at 2022-07-25 13:12
  • 15. Apexcharts data loading after window resize

    Hello, My issue here is pretty similar to this one : #185 I have an apexcharts line in my code and the data doesn't initially load only after I resize the window (it doesn't load when i refresh the page as well) I am creating a new issue because the one I quoted above doesn't seem to be active anymore, I asked if anyone found a fix and got no answer so I'm hoping someone here can help me fix the issue. I am using Vue btw.

    Here is my apexcharts:

    `

                      <apexchart
                        type="line"
                        height="350"
                        :options="chartOptions"
                        :series="series"
                      ></apexchart>
    

    `

    And here's my chartOptions:

    `chartOptions: {

        chart: {
          height: 350,
          type: "line",
          zoom: {
            enabled: false,
          },
          toolbar: {
            show: false,
          },
        },
        legend: {
          labels: {
            colors: "#FFFFFF",
          },
        },
        dataLabels: {
          enabled: false,
        },
        stroke: {
          curve: "straight",
        },
        title: {
          align: "left",
        },
        grid: {
          row: {
            colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
            opacity: 0.5,
          },
        },
        xaxis: {
          type: "datetime",
          categories: [],
          labels: {
            datetimeUTC: false,
            style: {
              colors: "#FFFFFF",
            },
          },
        },
        yaxis: [
          {
            title: {
              text: "Energie",
              style: {
                color: "#FFFFFF",
              },
            },
            labels: {
              style: {
                colors: "#FFFFFF",
              },
            },
            decimalsInFloat: 1,
          },
          {
            opposite: true,
            title: {
              text: "Puissance",
              style: {
                color: "#FFFFFF",
              },
            },
            labels: {
              style: {
                colors: "#FFFFFF",
              },
            },
            decimalsInFloat: 1,
          },
        ],
        tooltip: {
          enabled: false,
        },
        colors: ["#8AB4F7", "#8DCD7F"],
    
      },`
    
    Reviewed by NazliTb at 2022-06-21 10:21
  • 16. List of words doesnt put them on new line #96

    Data in apex charts component

    image

    Output

    image

    Package.json

     "dependencies": {
        "apexcharts": "^3.35.2",
        "axios": "^0.26.0",
        "core-js": "^3.8.3",
        "office_tools": "./office_tools_api/",
        "querystring-es3": "^0.2.1",
        "vue": "^2.6.14",
        "vue-apexcharts": "^1.6.2",
        "vue-frag": "^1.4.0",
        "vue-router": "^3.5.1",
        "vue2-datepicker": "^3.10.4",
        "vuex": "^3.6.2"
      },
    
    Reviewed by ZeroCoolHacker at 2022-06-21 07:50
  • 17. Panning Issue on zoomed in Scatter graph

    There is an unexpected behavior when you're zoomed in a scatter graph and try to pan the view. It resets the view and zoom.

    The behavior can be seen in the offical docs here https://apexcharts.com/vue-chart-demos/scatter-charts/datetime/

    reproduce:

    1. select Zoom tool and zoom in to any view space you want to
    2. select the Panning tool and try to move the view e.g. to the bottom right corner
    Reviewed by ludwig-loth at 2022-06-20 12:35
Vue timer hook is a custom hook, built to handle timer, stopwatch, and time logic/state in your vue 3 component.

vue-timer-hook Vue timer hook is a custom vue 3 hook, built to handle timer, stopwatch, and time logic/state in your vue component. useTimer: Timers (

Aug 12, 2022
Apache ECharts component for Vue.js.

Vue-ECharts Vue.js component for Apache ECharts. ???? 中文į‰ˆ Uses Apache ECharts 5 and works for both Vue.js 2/3. ?? Heads up ?? If your project is using

Aug 10, 2022
:bar_chart: Highcharts component for Vue

vue-highcharts Highcharts component for Vue. Requirements Vue >= 3.0.0 Highcharts >= 4.2.0 Installation npm i -S vue-highcharts For Vue 2, please run

Jun 1, 2022
Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)

vue-echarts-v3 Vue.js v2.x+ component wrap for Apache ECharts (incubating) v3.x+ Feature Lightweight, efficient, on-demand binding events; Support for

Jul 30, 2022
Vue component to graph networks using d3-force
Vue component to graph networks using d3-force

vue-d3-network Vue component to graph networks using d3-force Demo Demo Features SVG render Canvas render Links and nodes selection svg <-> canvas sha

Aug 11, 2022
Vue sunburst component based on D3.js
Vue sunburst component based on D3.js

Vue.D3.Sunburst Live example: https://david-desmaisons.github.io/Vue.D3.sunburst/ About Vue.D3.Sunburst provides a reusable vue sunburst charts compon

Jul 18, 2022
🍩 Doughnut chart component for Vue.js, originally created by Greg Willson

?? Vue Doughnut Chart Doughnut chart component for Vue.js, originally created by Greg Willson in codepen Demo https://mazipan.github.io/vue-doughnut-c

Jan 19, 2022
Lightweight Vue component for drawing pure CSS donut charts
Lightweight Vue component for drawing pure CSS donut charts

vue-css-donut-chart Lightweight Vue component for drawing pure CSS donut charts Live demo Live demo can be found on the project page – https://dumptyd

Jul 16, 2022
Vue.js component drawing SVG Funnel Graphs

VueFunnelGraph.js Funnel graph drawing library for Vue.js. SVG charts Values, Labels, Percentages display Two-dimensional graph support Legend display

Jul 25, 2022
Simple and lightweight vue chart component without using chart library dependencies
Simple and lightweight vue chart component without using chart library dependencies

Pure Vue Chart A simple and lightweight vue component for making charts that do not rely on large chart libraries and will not bloat your dependencies

Jul 19, 2022
A Vue component to create charts with ZingChart
A Vue component to create charts with ZingChart

Quickstart guide Quickly add charts to your Vue application with our ZingChart component This guide assumes some basic working knowledge of Vue. 1. In

Jul 25, 2022
Flowchart & designer component for Vue.js.

Flowchart Flowchart & Flowchart designer component for Vue.js(flowchart-react for React.js). English | 中文 Usage yarn add flowchart-vue <template>

Aug 9, 2022
Vue component to draw bar charts with d3 v4
Vue component to draw bar charts with d3 v4

vue-d3-barchart Small component to draw charts using d3 v4 Demo Demo Installation npm install vue-d3-barchart --save Usage ... <d3-barchart :da

Mar 18, 2022
Vue 3 component wrapper for Highcharts.js

Vue 3 - Highcharts JS A simple, fast, Vue 3 component for rendering Highcharts.js Charts written using the composition API. Demos https://smithalan92.

Jul 10, 2022
📊📈 ECharts wrapper component for Vue 3 and 2

įŽ€äŊ“中文 | English ECharts For Vue ?? ?? ECharts wrapper component for Vue 3 and 2 Features Support for Vue 3 and 2; Conform to the habits of Vue and ECha

Apr 28, 2022
Apache ECharts component for Vue.js.

Uses Apache ECharts 5 and works for both Vue.js 2/3.

Aug 9, 2022
A component for rendering custom scatter plots in vue with a scoped slot
A component for rendering custom scatter plots in vue with a scoped slot

A Vue component for making custom scatter plots. This component does all of the math for you, so you make all the decisions about how your data renders.

Jun 5, 2018
An interactive SVG based network-graph visualization component for Vue 3.
An interactive SVG based network-graph visualization component for Vue 3.

An interactive network graph visualization component for Vue 3

Aug 16, 2022
Vue Component for FusionCharts JavaScript Charting Library

vue-fusioncharts A simple and lightweight VueJS component for FusionCharts JavaScript Charting Library.

Jul 27, 2022