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!
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'