Styling issues with Chartist + VueJs + Webpack

Question

I am following the documentation provided here for a simple line chart. All the dependent packages were added using yarn and could it be possible that the attached css/scss isnt bootstrapped correctly?

Issue

The rendered chart is all black and ugly as seen in the screenshot possibly because of missing css, not sure.

packages used

 "dependencies": {
    "chartist": "^0.11.0",
     "vue": "2.5.0",
    "vue-typed": "git+https://github.com/icfr/vue-typed.git#update_vue",
    "vuetify": "^0.17.6"
},
"devDependencies": {
    "@types/chartist": "^0.9.38"
}

Vue Js template - linechart.vue

<template>
  <v-content>
     <v-container grid-list-xl>
            <h2>Line chart using chartist.js</h2>
            <div class ="ct-chart"></div>
     </v-container>
   </v-content>
</template>

TS code

import Vue from "vue";
import { Component, Prop } from "vue-typed";
import * as Chartist from "chartist";
const template = require("./linechart.vue");

export default class ChartistLineChart extends Vue {
mounted() {
    let chart = this.$el.getElementsByClassName("ct-chart")[0];
    let data: Chartist.IChartistData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        series: [[740, 790, 720, 900, 890, 880, 840],
                 [140, 390, 100, 900, 190, 180, 400]
                ]
    };
    let options: Chartist.ILineChartOptions = {
        fullWidth: true,
        chartPadding: {
            right: 40
          }
    };
    let lineChart = new Chartist.Line(chart, data, options);
}

What am i possibly missing? thanks!

Answer 1

You're missing to include styles for Chartist.

https://gionkunz.github.io/chartist-js/getting-started.html#one-two-three-css

Add it in your <meta> tag:

<link rel="stylesheet" href="bower_components/chartist/dist/chartist.min.css">

or import using webpack loader (if you have it configured) as any file in JS:

import 'bower_components/chartist/dist/chartist.min.css'