Skip to content

Instantly share code, notes, and snippets.


JeffreyWay/Graph.js Secret

Last active Mar 3, 2017
What would you like to do?
import Chart from 'chart.js';
export default {
template: '<canvas width="600" height="400"></canvas>',
props: {
labels: {},
values: {},
color: {
default: 'rgba(220,220,220,0.2)'
ready() {
var data = {
labels: this.labels,
datasets: [
fillColor: this.color,
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: this.values
new Chart(
import Vue from 'vue';
import Graph from './components/Graph';
new Vue({
el: 'body',
components: { Graph }
<!DOCTYPE html>
<div class="container">
<graph :labels="['January', 'February', 'March']"
:values="[10, 42, 4]"
<div class="container">
<graph :labels="['April', 'May', 'June']"
:values="[100, 420, 99]"
<script src="/js/main.js"></script>

This comment has been minimized.

Copy link

@ChristopherDosin ChristopherDosin commented May 21, 2016

I got the error app.js:43519Uncaught TypeError: (intermediate value).Line is not a function
So i had to change Line 31-33 to

        new Chart( this.$el.getContext('2d'), {
            type: "line",
            data: data

which solves the error


This comment has been minimized.

Copy link

@babadee08 babadee08 commented Oct 3, 2016

I'm assuming the code is a bit dated you can also try this in case you run into some weird error or just lookup the Chart.js documentation.
var context = this.$el.getContext('2d');
new Chart.Line(context, {data:data});


This comment has been minimized.

Copy link

@kofoedandreas kofoedandreas commented Nov 9, 2016

Hi Jeffrey,

I have copied your files 1:1, but the graphs are not drawn.

I have changed Import Vue from 'vue'; to import Vue from 'vue/dist/vue.js'; in order to reference properly.

Do you know if these lines of codes are outdated?



This comment has been minimized.

Copy link

@nezaboravi nezaboravi commented Mar 3, 2017

@kofoedandreas it does not matter how you import or include vue.js as long as its included.
new Chart() is changed on Chart.js side therefore Jeffery code is outdated
This is how youshould init it now with 2.5 version of Chart.js
let myChart = new Chart(this.$el.getContext('2d'), {
type: 'line',
data: data

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.