apertureless / vue-chartjs

📊 Vue.js wrapper for Chart.js

vue-chartjs

vue-chartjs is a wrapper for Chart.js in Vue. You can easily create reuseable chart components.

Supports Chart.js v4.

QuickStart   •   Docs   •   Stack Overflow

---

Quickstart

Install this library with peer dependencies:

pnpm add vue-chartjs chart.js
# or
yarn add vue-chartjs chart.js
# or
npm i vue-chartjs chart.js

Then, import and use individual components:

<template>
  <Bar :data="data" :options="options" />
</template>

<script lang="ts">
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
import { Bar } from 'vue-chartjs'

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

export default {
  name: 'App',
  components: {
    Bar
  },
  data() {
    return {
      data: {
        labels: ['January', 'February', 'March'],
        datasets: [{ data: [40, 20, 12] }]
      },
      options: {
        responsive: true
      }
    }
  }
}
</script>

---

Need an API to fetch data? Consider Cube, an open-source API for data apps.

Docs

• Reactivity
• Access to Chart instance
• Accessibility
• Migration from v4 to v5
• Migration from vue-chart-3
• API
• Examples

Build Setup

# install dependencies
pnpm install

# build for production with minification
pnpm build

# run unit tests
pnpm test:unit

# run all tests
pnpm test

Contributing

1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

License

This software is distributed under MIT license.

vue-chartjs's Issues

How to create mixed chart types

Expected Behaviour

In the chart js documentation http://www.chartjs.org/docs/#chart-configuration-mixed-chart-types there is a section regarding created mixed charts, for example a line chart with bar overlay.

I tried doing the following:

import Chart from 'vue-chartjs';

export default Chart.Line.extend({
    data: function () {
        return {
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        }
    },
    mounted () {
        this.renderChart({
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
            {
                type: 'bar',
                label: 'Bar Component',
                data: [10, 20, 30],
            },
            {
                type: 'line',
                label: 'Line Component',
                data: [30, 20, 10],
            }
        ]
        }, this.options)
    }
})

Actual Behaviour

However this shows the chart but without the bar overlay, I believe it may have something to do with the fact the above is extending Chart.Line and not Chart.Bar.

How can I get multiple charts to work correctly?

Environment

• OS: Windows 10
• NPM Version: 3.10.8

hello a q about reactivity

cant get to make the reactive prop to update the chart although it shows that the data has been changed the chart wont update or redraw
can anyone please post example , btw iam on vue 2.1

Why "main" in Package.json is "src/index.js" and not "dist/vue-chartjs.js"

Hey,
I had problem my app didn't work because my webpack didn't compile the libary in node_modules,
by changing your Package.json main property value from "src/index.js" to "dist/vue-chartjs.js"
it started back to work.

My question why you would do something like this?

An in-range update of eslint-config-standard is breaking the build 🚨

Version 7.0.2 of eslint-config-standard just got published.

Branch	Build failing 🚨
Dependency	eslint-config-standard
Current Version	7.0.1
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-config-standard is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Commits

The new version differs by 2 commits .

• d75816c 7.0.2
• eb9b41f Relax rule: Allow tagged template string expressions (no-unused-expressions)

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Update Chart.js docs to include link to vue-chartjs

Hey @apertureless,

I'm one of the maintainers of Chart.js. I came across your plugin and I'd love for you to PR it into our docs. The docs list some popular extensions here and I think vue-chartjs would fit in well there.

Cheers,
Evert

UglifyJs is not happy with versions after 2.3.8

Hey, there seems to be something odd in version 2.3.9 and onward when trying to run production mode (UglifyJs). After looking at the line the error below shows I see this: https://github.com/apertureless/vue-chartjs/blob/develop/src/BaseCharts/Line.js#L39

Expected Behavior

Not the Actual Behavior.

Actual Behavior

`ERROR in app.js from UglifyJs
Unexpected token punc «(», expected punc «:» [app.js:36079,7]

ERROR in app.js from UglifyJs
Unexpected token punc «(», expected punc «:» [app.js:36079,7]

Environment

• vue.js version: 2.2.1
• vue-chart.js version: >=2.3.9
• npm version: 3.10.8

Rerender when data has changed

Hi! I am using the next branch.

I was wondering how I can make my charts reactive to the data that I enter through the :data property.

So, what should I do to re-render/update a graph?

Edit:
And I do know that the data has changed. I can see that through Vue Devtools. So the new data is reactiv to the inside of my chart component. But there graph does not update when the new data arrives.

📝 Translate documentation

Would need some help with the translation of the docs.
I will soon translate it into german. However I think chinese would be also great, as there is a big vue community there.

Simply check out docute and submit a PR ;)
And please pick the right README in the /docs folder

Lanuages

• German
• Chinese
• Japanese
• Indonesian
• Brazilian Portuguese
• Russian
• French
• ???

Working with objects

I am trying to populate a chart component dynamically with reference from a parent data object + mixins

Is there a way to pass a data Object to the methods eg. Labels to enumerate over my existing object of objects or do I have to build a custom solution to pass it an array? If not, this would be a really cool new feature that would really help build dynamic charts!

ps. I referenced this on stack too but thought it might be worth bringing up as a feature request if it doesn't already exist

Issues after using gulp-- production

Hi! I am currently on vue 2.0.1 and vue-chartjs 2.2.0.

After ugrading to vue-chartjs 2.2.1.....

Expected Behavior

Everything should work, lol.

Actual Behavior

When using "gulp":

• Everything still works, yay.

When using "gulp --production":

• Pie Charts do not render anymore
• Uncaught ReferenceError: a is not defined(…)

Environment

• OS: Laravel Homestead VM on Windows
• NPM Version: 3.8.6
• Building with Laravel Elixir via Gulp and Webpack.

Unable to refresh

Expected Behavior

I want the chart to automatically refresh when the data changes to apply the new shape E.g

//line-char.vue
<script>
    import {Line,mixins } from 'vue-chartjs'
    export default Line.extend({
        mixins:[mixins.reactiveProp],
        props: ["chartData", "options"],
        mounted () {
            this.renderChart(this.chartData, this.options)
        }
    })
</script>

//report.vue
<template>
    <line-chart :chartData="data"></line-chart>
</template>
<script>
    import LineChart from './charts/line-chart.vue'
    export default{
        data(){
            return {
                data : {
                    labels : ["January","February","March","April","May","June","July"],
                    datasets : [
                        {
                            backgroundColor:"rgba(1,12,3,0.3)",
                            label: 'GitHub Commits',
                            data : [28,48,40,19,96,27,100]
                        }
                    ]
                }
            }
        },
        created(){
            var vm = this;
            setInterval(function() {
                let temp = [];
                for(let i = 0; i< 7;i++){
                    temp.push(Math.ceil(Math.random()*100));
                }
                console.info(temp);
                vm.data.datasets[0].data = temp;
            }, 5000);
        },
        components:{
            LineChart
        }
    }
</script>

According to the documentation, I learned that using mixins can be refreshed, but the results of this code can not be expected.

Actual Behavior

The result is that the data has changed and the graphics have not changed

Environment

• OS: windows10 , chrome52

Pass Reactive data into Scatterplot

Is it possible to create a line chart that uses my own predefined x & y axis data? Currently, the line chart accepts an array of values that correspond to the array of labels. However, Chart.js allows data to be declared like this:
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{x: -10,y: 0}, {x: 0,y: 10}]
}]

Anyways, is it possible to do this with Vue-chartjs? I have been attempting it but get a "me.ticks.map is not a function" typeError.

Colors of dynamically added bars in bar graph are the default color instead of specified color

Expected Behavior

When I update the chartData of a barchart containing a dynamic number of bars and an array of backgroundColors I expect the added bars to have the background color specified in the array.

For example:
I have a graph with 2 bars and a backgroundColors array of ['orange','green'] it displays correctly. When I update the data and it contains 3 bars with ['orange','green','blue'] the last bar is not blue but the default grey color.

I'm using the reactiveProp mixin.

Actual Behavior

The last bar is grey, not the color specified in the array.

Environment

• OS: OSX
• NPM Version: 2.3.5

Access chartjs methods

Is there a way to access the underlying chartjs instance. I need to call methods on it to add some event based functionality.

Use Vue.util.mergeOptions to merge default options with user's options

methods: {
    render (data, options) {

      var mergedOptions = Vue.util.mergeOptions(this.options, options)

      const chart = new Chart(
        this.$els.canvas.getContext('2d'), {
          type: 'bar',
          data: data,
          options: mergedOptions
        }
      )
      chart.generateLegend()
    }
  }

This would allow users to override parts of the defaults without having to copy the rest of the defaults into their component to preserve them.

It would also be possible to introduce a 3rd argument as a flag to decide weither to override or not:

 render (data, options, override = true) {
      var mergedOptions =  override ? options : Vue.util.mergeOptions(this.options, options)

Add test

• Add some basic test coverage.

Content Security Policy

Expected Behavior

Displays line chart.

Actual Behavior

Fails to render the line chart with the following errors:

[Vue warn]: It seems you are using the standalone build
of Vue.js in an environment with Content Security Policy
that prohibits unsafe-eval. The template compiler cannot
work in this environment. Consider relaxing the policy to
allow unsafe-eval or pre-compiling your templates into render functions.

[Vue warn]: failed to compile template:


    <div>
      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  

- invalid expression: :id="chartId"
- invalid expression: :width="width"
- invalid expression: :height="height"

TypeError: Cannot read property 'getContext' of undefined

Environment

• OS: Ubuntu 14.04.
• Node v7.2.1
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

I'm using this Content-Security-Policy: Content-Security-Policy:base-uri 'self'; default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src *; connect-src 'self'; font-src 'self'; form-action 'self'; frame-ancestors 'none'

All other parts of my application work as expected until I try to render a chart for the first time.

My LineChart component looks like this:

<script>
import { Line } from "vue-chartjs";

export default Line.extend({
    props: ["data", "options"],
    mounted () {
        this.renderChart(this.data, this.options);
    }
});
</script>

Uncaught TypeError: _c is not a function

Hello, here's what I did :

<template>
  <canvas id="myChart" width="400" height="400"></canvas>
</template>

<script>
/*eslint-disable*/
import VueCharts from 'vue-chartjs'
import { Bar, Line } from 'vue-chartjs'

export default Bar.extend({
  name: 'dashboard',
  mounted: function () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    })
  }
})
</script>

And this is the error I get in the console:

Vue warn]: Property or method "_c" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in component <dashboard> at /Users/gplus/vm/weather-dashboard/src/components/dashboard.vue)
Lr
2016-12-17 11:17:11.918 (unknown) [Vue warn]: Error when rendering component <dashboard> at /Users/gplus/vm/weather-dashboard/src/components/dashboard.vue: 
Lr
2016-12-17 11:17:11.918 localhost/:7 Uncaught TypeError: _c is not a function
    at Proxy.render (eval at <anonymous> (app.js:756), <anonymous>:2:10)
    at o.Ce.t._render (eval at <anonymous> (app.js:732), <anonymous>:7:17515)
    at o.eval (eval at <anonymous> (app.js:732), <anonymous>:7:11842)
    at Kr.get (eval at <anonymous> (app.js:732), <anonymous>:9:4428)
    at new Kr (eval at <anonymous> (app.js:732), <anonymous>:9:4367)
    at o.e._mount (eval at <anonymous> (app.js:732), <anonymous>:7:11810)
    at o.ze.$mount (eval at <anonymous> (app.js:732), <anonymous>:9:15134)
    at o.ze.$mount (eval at <anonymous> (app.js:732), <anonymous>:9:18888)
    at init (eval at <anonymous> (app.js:612), <anonymous>:2500:11)
    at createComponent (eval at <anonymous> (app.js:612), <anonymous>:4052:9)

how to set this chart width and height ?

my english is very poor ,sorry~

how to set this chart width and height ?

this is my code

// homechart.js
import { Line } from 'vue-chartjs'
export default Line.extend({
  props: ["data"],
  mounted () {
    this.renderChart(this.data, {

    })
  }
})

my vue app

<template>
  <homechart :data='chart'></homechart>
</template>
<script>
  import homechart from './homechart'
  export default {
    components: { homechart },
    data() {
      return {
        chart:{
          labels : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
          datasets : [
            {
              fillColor : "rgba(220,220,220,0.5)",
              strokeColor : "rgba(220,220,220,1)",
              data : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,1]
            }
          ]
        }
      }
    },
  }
</script>

the chart is work , but ,it's so big, i want set chart width and height.

show me the code , please , think you!

Lines are looking weird.

i have updated the plugin to latest version from older version. i have noticed the lines are looking weired.. do you have any idea why this has happened ? what am i missing ?

Thanks

Environment

• vue.js version: 2.2.1
• vue-chart.js version: 2.5.0

Vue-chartjs components creating a second Vue runtime

Actual Behavior

When registering a custom component using vue-chartjs, at the moment of the require, a second Vue runtime is executed, resulting:

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

In boostrap.js there is this line:

window.Vue = require('vue');

But I figured out that in each vue-chartjs component (as Bar, Line, ...) there is also this line:

import Vue from 'vue'

Environment

• NPM Version: 4.1.2
• Node Version: 7.4.0
• Laravel Version: 5.4
• Vue Version: 1.10

Mixins don't seem to trigger a refresh of the chart

Expected Behavior

Adding a label and value to the dataset should add the item to the chart

Actual Behavior

Adding a label and value to the data doesn't change the chart. The chart only gets redrawn when I resize the browser

Line chart:

import { Line, mixins } from 'vue-chartjs'

export default Line.extend({
  props: ["options", "chartData"],
  mixins: [mixins.reactiveProp],
  mounted () {
    this.renderChart(this.chartData,this.options);
    this._chart.update();
  },
})

Component:

<template>
    <div class="charts">
      <div class="col-md-12">
        <line-chart :chart-data="chartData" :options="chartOptions"></line-chart>
        <md-button @click.native="addData">add data</md-button>
      </div>
    </div>
</template>
<style scoped>
</style>
<script>
import lineChart from './chartOverviewTimeline.js';

export default {
    name: 'chartDashboard',
    components : {
        lineChart
    },
    data: function () {
        return {
          chartData : {},
          chartOptions : {mainAspectRatio : false}

        }
    },
    mounted(){
      this.prepareChartData();
    },
    methods: {
      addData: function(){
      for(let i = 0 ; i < 1; i ++){
          this.chartData.labels.push(100 + i);
          this.chartData.datasets[0].data.push(Math.random() * 100);
        }
      },
      prepareChartData(){
        this.chartOptions = {
          maintainAspectRatio:false,
          scaleShowHorizontalLines : true,
          scales: {
            xAxes: [{
              stacked: false
            }],
            yAxes: [{
              stacked: false,
              gridLines:{
                display: true
              }
            }]
          }
        };
        this.chartData = {
          labels:[],
          datasets:[
            {
              label: 'Sensor 1',
              backgroundColor: '#734375',
              data: [],
              fill: false,
              lineTension: 0
            }]
        };
        for(let i = 0 ; i < 5; i++){
          this.chartData.labels.push(i);
          this.chartData.datasets[0].data.push(Math.random() * 100);
        }
      }
    }    
}
</script>

I would expect that the addData function triggers a change in the prop and therefor a redraw in the chart.

Vue chartjs version 2.3.7

question:syntax with vue-loader

Does anyone know some example syntax using vue-chartjs with vue-loader?

<template>..</template>
<script>..</script>

TypeError: child._updateFromParent is not a function

Expected Behavior

When I update chart data, I want the chart to be updated.

Actual Behavior

When I update chart data, I get the error TypeError: child._updateFromParent is not a function
(I tried to pass data throught event, vuex, and even tried to forceUpdate)

This is an error I got with the reactive prop example too (so I used reactive data example).

Environment

• vue.js version: 2.1.8
• vue-chart.js version: 2.5.0
• npm version: 3.10.9

Chart height definition inside the component

Hi @apertureless

Thanks for your great work!

I have a question. Can I set the height within the component itself?
I can't set this.height = 200 because you can't modify a prop inside a component.
I know about the container option and the prop. But I'd like to set the height of the chart depending of the data it has.
Sure I can calculate that in the prop, but I think the logic should be in my component.

Error in rendering

Expected Behavior

Based on the examples the graph should render when provided data.

Actual Behavior

Error: [Vue warn]: Failed to mount component: template or render function not defined.

Environment

• OS: Mac
• NPM Version: 3.10.8

Cannot modify styling using options

Expected Behavior

When passing option data such as

options: { responsive: true, maintainAspectRatio: false, legend: { display: true, labels: { fontSize: '1em', fontFamily: "'Roboto' sans-serif", fontColor: "#000" } }

in the options parameter of renderChart() for those styling options to be honored.

Actual Behavior

All styling follows the default styling, which is not configurable (or at least I couldn't find how to do so).
While in the area, being able to modify the global style would be fantastic.

Environment

• vue.js version: 2.2.2
• vue-chart.js version: 2.5.1
• npm version: 3.10.10
• yarn version: 0.21.3

Animation with reactivity

If chart has empty initial labels and data and they are updated dynamically - appear animation not working. Do you know how i can fix this?

Environment

• OS: linux mint
• NPM Version: 7+

How to use without babel/webpack?

So I'm running vue without compilation, no webpack babel browserify etc.
Is there a way to include this as a plain old <script src=''> tag?

Thanks!

Uncaught TypeError: Cannot read property 'draw' of null

Expected Behavior

Chart will re-render when data is changed using reactiveProp

Actual Behavior

Uncaught TypeError: Cannot read property 'draw' of null

Description

Hello, I am trying to use the reactiveProp mixin to update a line chart.

When I do the following, I receive the error listed above.

this.chartData.datasets =
[
              {
                label: 'New Label',
                backgroundColor: '#f87979',
                data: [40, 20, 42, 20, 20, 20, 20, 20, 20, 20, 22, 21]
              }
            ]

From the below image, it looks the _meta object is being cleared out, but I don't know if this is related or not.

Environment

• OS: OSX
• NPM Version: 3.8.7

Styling componement's surrounding <div>

Hello,
i try to center a chart in a grid system and AFAIK found that components add a div that can't be reached for styling. Example here

Expected Behavior

Maybe a prop that can allow passing class or styling properties

Actual Behavior

Not implemented, i might propose a P/R if needed

Environment

• vue.js version: 2.1.0
• vue-chart.js version: 2.5.3
• npm version: 3.10.10

Thanks for you time on this project

Since last update bar chart will no longer stack

I just ran npm update and I am now running the latest version of vue-chartjs.

Before the update the bar chart I have with two data sets was stacking on top perfectly (on the x axes).
However now that I have updated the bars of the two data sets are next to each other instead of on top of one another.

I have tried adding stacked: true etc to the chart options x axes however nothing now seems to work.

Is anybody else having this issue with stacking bar charts?

barchart 如何横向显示条形图

Expected Behavior

Actual Behavior

Environment

• OS: Write here
• NPM Version: Write here

Publish on NPM

I used the vue-cli to scaffold the project. However it's not really compatible as a npm module.

• Change folder strucutre
• Change webpack config
• Add index.js with the submodules so you can import { BarChart } from 'vue-chartjs'

Adding static data and dynamic data at the same time.

Not sure if I missed something from the examples but I'm trying to have my labels/colors set (static) in my js page while having the data for it set (dynamically) in my vue page through props. Whenever I add in the labels to my js page and try to add in this.chartData as well, it breaks. Is there a way to do this that I'm missing? Thanks.

TypeError: child._updateFromParent is not a function

Expected Behavior

在mint-ui组件Tabbar使用报这个错

Actual Behavior

Environment

• vue.js version:
• vue-chart.js version:
• npm version:

Using data from vuex to populate a line graph

Expected Behavior

Hello! I'm trying to load a line chart using the reactiveProp and no data is showing on the graph for me on initial load. Please note that the chart data is stored using vuex. Here's the process that we follow:

We have two components that deal with the graph:

1. A Course component
2. A CourseGraph component

Process:

1. On page load, before Course mounts, Course dispatches an action ('updatePredictionData') to initialize data in the vuex store with an API request. (the API request happens in the store)

2. Course calls its mounted function, which calls fillData(), which populates its data with the activeCourseChartData from the getter. activeCourseChartData returns all zeros because the store wasn't finished updating from the 'updatePredictionData' action.

3. Once the data in the store is finished updating, it should trigger the component's 'updated' function and call fillData() again.

4. The problem is that the component's 'updated' function doesn't get called, which doesn't trigger the fillData function().

5. The result is our graph doesn't update its data even after the computed property activeCourseChartData returns updated data

The Course component, which passes a prop to the course-graph component
template part of course component

<template>
    <div>
        <course-graph :chart-data="datacollection"></course-graph>
    </div>
</template

javascript part of course component

<script>
    export default {
        data() {
            return {
                datacollection: null,
                courseDataLoaded: false,
            }
        },
        methods: {
            fillData () {
                // we always have 560 datapoints, so we're just
                // going to create labels from 0 to 560
                var chartLabels = []
                for (var i = 0; i < 560; ++i) {
                    chartLabels.push(i)
                }
                // set datacollection
                this.datacollection = {
                    labels: chartLabels,
                    datasets: [
                        {
                        label: 'Seats Available',
                        // pull data from a getter, which returns an 
                        // array of 560 integers theoretically this should 
                        // update the data and not cause a re-render
                        data: this.activeCourseChartData, 
                        }
                    ],
                }
            },
        },
        mounted() {
            this.fillData() // on mounted, call fillData()
        },
        beforeMount() {   
            // Before the component is mounted, we dispatch 
            // an action which makes an API request
            // and sets data in the store
            this.$store.dispatch('updatePredictionData')
        },
        updated() {
            // should update datacollection when it detects a change in the store
            // (i.e. after updatePredictionData gets called)
            this.fillData()
        },
        computed: {
            // returns an array of 560 integers from the vuex store
            // returns all zeros when the store is not yet set 
            // (i.e. updatePredictionData hasn't been dispatched)
            activeCourseChartData() {
                return this.$store.getters.activeCourseChartData
            },
        },

The CourseGraph component

<script>
import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,
    mixins: [mixins.reactiveProp],
    mounted () {
        this.renderChart(this.chartData, { responsive: true, maintainAspectRatio: false})
    },

If you're familiar with vuex and how it interacts with chart data, please lmk :)

On a side note, if the data updates, is it supposed to re-render the graph? Like cause the graph to animate from the x-axis up?

Environment

• vue.js version: latest version
• vue-chart.js version: latest version

dependency was not found

After a successful installation, an error occurred when attempting to use it.

dependency was not found:
lodash/fp/merge

Destory chart instance in reactiveMixins on render

Chart instance needs to be destroyed before render in reactiveProp and reactiveData mixins.
Otherwise they could overlap on mouseover.

Add src folder to package.json "files" and make main "src/index.js"

Could you add the src folder to files in package.json, at the moment it looks like the dist file includes Vue itself, which means I'm importing Vue twice, which I only realised when I updated to Vue 2.2.1 and vue devtools was detecting Vue 2.1.10 from vue-chartjs. It's back to 2.2.1 now I've updated this package, but it looks like every time Vue realeses a new version I'm going to have to rely on you to do the same before I can update Vue in my app and that's a bit of a deal breaker.

Also, it makes sense to have src/index.js as your main file as most of us are going to be using browserify/vueify or webpack/vue-loader setups, this way we can just bundle the charts we need. I'm pretty sure you had it set up this way before and it worked great.

Compatibility with Vue 2.1.10

Expected Behavior

vue-chartjs works with [email protected].

Actual Behavior

Running [email protected] with [email protected] results in the application crashing with Uncaught TypeError: Cannot read property 'prototype' of undefined. Rolling back to [email protected] prevents the crash, but the charts are not being rendered.

Complete error stack:

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at mergeOptions (eval at <anonymous> (app.js:624), <anonymous>:1360:17)
    at Function.Vue.extend (eval at <anonymous> (app.js:624), <anonymous>:3632:20)
    at eval (eval at <anonymous> (app.js:780), <anonymous>:9:36)
    at Object.<anonymous> (app.js:780)
    at __webpack_require__ (app.js:556)
    at fn (app.js:87)
    at eval (eval at <anonymous> (app.js:1056), <anonymous>:5:19)
    at Object.<anonymous> (app.js:1056)
    at __webpack_require__ (app.js:556)
    at fn (app.js:87)

Environment

• OS: Ubuntu 16.04 64-bit (Linux 4.4)
• NPM Version: 3.10.10

Thanks for the support!

Change name of the render method to ensure compatiblity with Vue 2.0

Vue 2.0 introduces its own render() function which allows to render vdom elements programatically (like Reactjs).

This will conflict with the render() method of this lib.

to ensure compatibility, a breaking change is required - renaming this method to something else, e.g. renderChart()

The page is blank？

Expected Behavior

Actual Behavior

npm i => npm run dev => The page is blank

Environment

• OS: Write here
• NPM Version: Write here
  ^1.1.3

chart do not render after build

Expected Behavior

chart works well on both dev and build environment

Actual Behavior

executing npm run dev

everything works well.

executing npm run build and upload to server

it shows error: Uncaught ReferenceError: o is not defined

Environment

• OS: macOS Sierra 10.12.2
• NPM Version: 4.0.5

it seems similar to #19 but I already used babel

how can I make it right?

package.json

{
  "name": "name",
  "description": "description",
  "author": "author",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "babel-polyfill": "*",
    "element-ui": "^1.0.0-rc.4",
    "v-vuerify-next": "^0.2.0",
    "vue": "^2.0.1",
    "vue-chartjs": "^2.3.1",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.0.0",
    "vuerify": "^0.3.0",
    "vuex": "^2.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-runtime": "^6.11.6",
    "cross-env": "^1.0.6",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "style-loader": "^0.13.1",
    "vue-loader": "^9.5.1",
    "webpack": "2.1.0-beta.22",
    "webpack-dev-server": "^2.1.0-beta.0"
  }
}

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: 'dist/',
    filename: 'build.js'
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: 'style!css'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'file',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  babel: {
    babelrc: false,
      presets: [
          ['es2015'],
      ],
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ])
}

The vue-chartjs/src entry point is still creating a new vue instance.

Expected Behavior

As per the docs, this entry point is not supposed to load vue.common.js.

Actual Behavior

Even when using this entry point, vue.common.js is loaded a second time.

Currently importing the package like this:

import { Line } from 'vue-chartjs/src'

Is there additional configuration that needs to be done within my webpack config? I didn't see anything in the docs for this.

Any more information I can provide that would help out just let me know, but my code is not much different from the example code as I was just starting out with this and noticed the second instance.

Environment

• vue.js version: 2.2.1
• vue-chart.js version: 2.4.1
• npm version: 3.10.10

Passing chart size (width / height) as prop doesnt resize the chart

Expected Behavior

The chart should of the one specified in the props

Actual Behavior

Appears to be 100% of the view port.

Environment

I'm using vueify and have something like this:

<my-chart width="300" height="300" :data="{{ json_encode($data) }}"></my-chart>

Is this the correct way to pass these properties to alter the size of the chart?

child._updateFromParent is not a function

Expected Behavior

child._updateFromParent is not a function

Actual Behavior

i pasted the demo example to my project and got this error,(the bar was displayed normaly)

Environment

• vue.js version:
• vue-chart.js version:
• npm version:

Rerendering doughtnut chart not working

Expected Behavior

When datasets[0].data is changed, the doughnut should rerender.

Actual Behavior

It isn't rerendering the doughnut. If you put your mouse over, you can see that data is changed, but still there is no visual change.

Component:

import { Doughnut, mixins } from 'vue-chartjs'

export default Doughnut.extend({
    mixins: [mixins.reactiveProp],
    props: ["chartData", "options"],
    mounted () {
        this.renderChart(this.chartData, this.options)
    },
    methods: {},
    events: {},
})

Then I'm just changing the data:
this.chart.datasets[0] = newData

Environment

• OS: Ubuntu
• NPM Version: 4.1.2

Uncaught TypeError: Cannot read property 'chartId' of undefined

Expected Behavior

I am using the reactiveProp mixin. The chart should update with the new values fetched from the api.

Actual Behavior

It is throwing an Error in the console.
Uncaught TypeError: Cannot read property 'chartId' of undefined
at getPropDefaultValue (eval at (app.js:814), :1323:14)
at validateProp (eval at (app.js:814), :1287:13)
at updateChildComponent (eval at (app.js:814), :2150:20)
at prepatch (eval at (app.js:814), :3015:3)
at patchVnode (eval at (app.js:814), :4792:7)
at updateChildren (eval at (app.js:814), :4719:9)
at patchVnode (eval at (app.js:814), :4803:29)
at VueComponent.patch [as patch] (eval at (app.js:814), :4927:9)
at VueComponent.Vue._update (eval at (app.js:814), :1992:19)
at VueComponent.updateComponent (eval at (app.js:814), :2095:10)

Environment

• vue.js version: 2.2.1
• vue-chart.js version: v2.3.7
• npm version: v6.9.2

Please update1.1.3 chartjs to 2.5.0

Please update Branch:release/1.1.3
chartjs to 2.5.0