[Vuejs]-Styling issues with Chartist + VueJs + Webpack

by

0👍

✅

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'

👤klimat

0👍

You can import the Chartist scss directly into your Vue component. 

npm install chartist --save

Then the following code snippet will get you up and running with Chartist:

<template>

   <div class="my-chart ct-chart"></div>

</template>

<script>

   import Chartist from 'chartist';
   ...

</script>

<style lang="scss">

    @import "~chartist/dist/scss/chartist";
    ...

</style>

That will make the ct-chart class available while still using all the Vue build niceties.

👤Kong

Leave a comment