Odd issue with simple line graph

[cfjedimaster]

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

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?

[rthaenert]

Hey @cfjedimaster I ran into a similar issue with a different chartist wrapper for Vue.js - you seem to be missing the CSS to display the chart properly.

See https://github.com/Yopadd/vue-chartist/issues/34.

Should be easy to verify by putting the Stylesheet in the view with <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">.

[cfjedimaster]

Thank you- I can confirm this fixed it. But this is still a bug in the library, right?

[sugoidesune]

@cfjedimaster No the css usually comes seperately to avoid duplication.

[cfjedimaster]

But this isn't documented - not that I can see. Shouldn't it be?