Vuejs-Vue chartist: vue-chartist - Vue.js 2.0 component wrap for Chartist.

v-chartist

A component of Chartist implements by vuejs 2.0

Installation

npm install v-chartist --save

or

bower install vue-chartist --save

Usage

import VueChartist from 'v-chartist';

new Vue({
    components: {
        'vue-chartist': VueChartist
    },
    template: '<vue-chartist :data="data" :options="options" type="Line"></vue-chartist>',
    data: function () {
        return {
            data: {
                labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
                series: [
                    [12, 9, 7, 8, 5],
                    [2, 1, 3.5, 7, 3],
                    [1, 3, 4, 5, 6]
                ]
            },
            options: {
                fullWidth: true,
                chartPadding: {
                    right: 40
                }
            }
        };
    }
});

Props

Property Description
data the data of chart
options the options of chart
type the type of chart, default Line
listener the listener of chart

See the document of Chartist for detail.

Contribution

First, install dependencies

npm install

Second, setup development environment

npm run dev

License

MIT

Comments

  • Gauge Chart Integration
    Gauge Chart Integration

    Aug 10, 2017

    Hi,

    Have tried integrating this library in my project Line, bar chart is working fine.

    How to integrate gauge chart? new Chartist.Pie('.ct-chart', { series: [20, 10, 30, 40] }, { donut: true, donutWidth: 60, startAngle: 270, total: 200, showLabel: false });

    as if i send data like this it throws error that it need object and i am passing array.

    Reply
  • `v-chartist` should be `vue-chartist`
    `v-chartist` should be `vue-chartist`

    Dec 7, 2017

                                                                                                                                                                                                           
    Reply
  • Add comparison with vue-chartist to readme and/or package description
    Add comparison with vue-chartist to readme and/or package description

    Feb 14, 2018

    I'm about to add chartist to my vue application and I stumbled upon both this project and also https://github.com/Yopadd/vue-chartist. They seems to do essentially the same thing except that one is a plugin and this one is a component. As someone unfamiliar with the capabilities of chartist (and fairly new to Vue), I don't really understand the pros/cons of these 2 libs enough to make an informed decision.

    That package appears to predate this one by a few years, but it is still actively maintained. Since you're the newcomer, it sorta falls on you to explain what your motivation was to create this library instead of just using and contributing to vue-chartist. Alternatively, just a section contrasting

    Vue itself does an amazing job with this at https://vuejs.org/v2/guide/comparison.html but since this library has only one alternative it would be much simpler, like https://github.com/UnnoTed/fileb0x/blob/master/README.md

    Reply
  • yarn complains about peer dependencies when using the latest version of chartist
    yarn complains about peer dependencies when using the latest version of chartist

    Feb 14, 2018

    Since chartist is still v0.x.x, yarn considers minor version bumps to be breaking changes as per the semver spec https://docs.npmjs.com/misc/semver#caret-ranges-123-025-004

    For this reason, yarn considers chartists current version 0.11.0 to satisfy vue-chartist's peer dependency of ^0.10.1

    The fix is simple, I'll give you a PR.

    Reply
  • bump chartist peer dependency
    bump chartist peer dependency

    Feb 14, 2018

    Judging from https://github.com/gionkunz/chartist-js/blob/develop/CHANGELOG.md, it doesn't appear that there were any breaking changes in this upgrade that would affect v-chartist. That said, some regression testing wouldn't hurt.

    fixes #8

    Reply
  • Releases?
    Releases?

    Nov 22, 2018

    Please do releases :) It will help to track changes and milestones :)

    Reply
  • chartist in options not defined
    chartist in options not defined

    Dec 31, 2019

    hey im trying to use Chartist in my options like the documentation says on their website but im getting chartist is not defined. What am I missing?

    axisX: {
            type: Chartist.FixedScaleAxis,
    }
    
    Reply
  • Odd issue with simple line graph
    Odd issue with simple line graph

    Jan 27, 2020

    I just started using vue-chartist and I'm getting an odd "bowtie" effect with a line chart.

    image

    Here's the code I'm using:

    <template>
      <div>
        <vue-chartist :data="pageViews" :options="options" 
        type="Line" />
      </div>
    </template>
    
    <script>
    import VueChartist from "v-chartist";
    
    export default {
      name: "App",
      components: {
        "vue-chartist": VueChartist
      },
      data() {
        return {
          pageViews: {
            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            series: [
                [5, 2, 4, 2, 0]
            ]
          },
          options: {
              fullWidth: true,
              width: 600,
              height: 300,
              lineSmooth:false
          }
        };
      }
    };
    </script>
    

    Any idea why I'm seeing this?

    Reply
  • references to your local files
    references to your local files

    Aug 31, 2017

    into dist : "/Users/linbin02/Desktop/workspace/vue-chartist/src/vue-chartist.vue"

    Reply
  • Bower support
    Bower support

    Apr 24, 2017

    Hi!

    Can you add Bower file + add this great component to Bower library?

    Thanks, Marek

    Reply
  • [Bug] Plugin not working
    [Bug] Plugin not working

    May 18, 2017

    Dude, Chartist AMD registers as "Chartist" not "chartist". You have changed first letter case and now it's broken. Please look at chartist code: https://github.com/gionkunz/chartist-js/blob/develop/dist/chartist.js

    define('Chartist', [], function () {

    Can you fix it asap? I cannot work :/

    Reply
  • Typo in require
    Typo in require

    May 11, 2017

    In https://github.com/lakb248/vue-chartist/blob/master/dist/vue-chartist.min.js

    the file is requiring "Chartist" instead of "chartist". and this leads to error of not finding dependancy.

    Reply