Please update chart.js to 2.7 so new data format data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}] can be used with bar charts too.

I have an axios response in the parent component. I can see it via Vue Dev Tools. No problems there. But, the chart child component show Array[0] . Any strings that are passed through the chart props (borderColor etc) DOES go to the chart child. If I hard code data array values, they DO show up.

What am I missing?

i want to create mix chart like line chart and bar chart both
please give me suggestion

Hey there!

Nice project, I greatly appreciate the Vue 2 support!
However, can you please release a more current version than 1.0.0, so it's installable via npm?

Thanks a lot!

My piechart uses data from the AJAX request, so the data comes after the chart is drawn. How can I redraw the chart based on the new data or make my piechart redraw automatically?

I just use npm install vue-bulma-chartjs and got some errors

ERROR in ./~/vue-bulma-chartjs/src/Chartjs.vue
Module not found: Error: Can't resolve 'scss-loader' in '/Library/WebServer/Documents/vue/node_modules/vue-bulma-chartjs/src'
 @ ./~/vue-bulma-chartjs/src/Chartjs.vue 5:0-159
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi main

just for 3 lines of code it use scss loader which cannot be installed successfully via npm with node v8.9.4, please save us time using pure css-loader

<style lang="scss">
  canvas.chartjs {
    max-width: 100%;
  }
</style>

Thanks for this code, working great so far.

Any plans for supporting scatter charts?

Vue warning: "invalid prop" for 'type'.

Spits out a default line chart on render.

Is it possible to have a click event on option list of a chart. I need to redirect to another URL when a user clicks on any of the list option of a pie chart.

It seems npm install vue-bulma-chartjs installs an version for vue 1.x
so I modify my package.json > dependencies like this:
"vue-bulma-chartjs": "git+https://github.com/vue-bulma/chartjs.git"
And run npm install vue-bulma-chartjs

Problem solved.

When I change the datasets send to Chartjs.vue, the Chart do not refresh.
It run the this.chart.update() line but that do nothing.

Thanks.

I am getting this warning in the console :
[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
Seems to be related to an outdated version of chart.js

Example: https://codesandbox.io/s/5mrzwp5q4p

In above example, when click on Change Data, data is changed but it's not updated in chart

<template>
  <div id="app">
    <button @click="changeData">Change Data</button>
    <chart :type="'pie'" :data="data" :options="options"></chart>
  </div>
</template>

<script>
import Chart from "./components/Chart.vue";

export default {
  name: "App",
  components: {
    Chart
  },
  data() {
    return {
      data: {
        labels: ["Sleeping", "Designing", "Coding", "Cycling"],
        datasets: [
          {
            data: [20, 40, 5, 35],
            backgroundColor: [
              "#1fc8db",
              "#fce473",
              "#42afe3",
              "#ed6c63",
              "#97cd76"
            ]
          }
        ]
      },
      options: {
        segmentShowStroke: false
      }
    };
  },
  methods: {
    changeData() {
      this.data = {
        labels: ["Sleeping", "Designing", "Coding", "Cycling"],
        datasets: [
          {
            data: [1, 2, 3, 4],
            backgroundColor: [
              "#1fc8db",
              "#fce473",
              "#42afe3",
              "#ed6c63",
              "#97cd76"
            ]
          }
        ]
      };
    }
  }
};
</script>

Especially, when data came from computed properties, chart will not be updated.
https://stackoverflow.com/q/50419627/2303610