Vue.js Dashed Line Chart

Download Vue.js Chart Samples

Example shows Vuejs line chart with dashed & dotted line types. CanvasJS Library also supports solid, dash-dot, long-dash, short-dash & more line types.

/* App.vue */
<script>
import * as $ from 'jquery';
export default {
  data() {
    return {
      chart: null,
      options: {
        exportEnabled: true,
        title:{
          text: "Births and General Fertility Rate - US",
          fontFamily: "Verdana, sans-serif"
        },
        axisY: { 
		  title: "No of Births (in Millions)",
		  titleFontSize: 16,
		  includeZero: true, 
		  lineColor: "#4F81BC",
		  tickColor: "#4F81BC",
		  labelFontColor: "#4F81BC",
		  titleFontColor: "#4F81BC",
		  labelFormatter: (e) => {
			var suffixes = ["", "K", "M", "B"];
			var order = Math.max(Math.floor(Math.log(e.value) / Math.log(1000)), 0);
			if(order > suffixes.length - 1)
			  order = suffixes.length - 1;
			var suffix = suffixes[order];
			return (e.value / Math.pow(1000, order)) + suffix;
		  }
		},
		axisY2: {
		  title: "Rate per 1000 females aged 15-44",
		  titleFontSize: 16,
		  lineColor: "#C0504E",
		  tickColor: "#C0504E",
		  labelFontColor: "#C0504E",
		  titleFontColor: "#C0504E",
		  includeZero: true
		},
        toolTip: {
          shared: true
        },
        data: [{
          type: "line",
          xValueFormatString: "YYYY",
          name: "No of Births",
          lineDashType: "dash",
          dataPoints: []
        }, {
          type: "line",
          xValueFormatString: "YYYY",
          axisYType: "secondary",
          name: "General Fertility Rate",
          lineDashType: "dot",
          dataPoints: []
        }]
      },
      styleOptions: {
        width: "100%",
        height: "360px"
      }
    }
  },
  methods: {
    parseDataAndRenderChart(url) {
      $.getJSON(url, (response) => {
          for(var i = 0; i < response.length; i++) {
            this.options.data[0].dataPoints.push({ x: new Date(response[i]["year"], 0, 1), y: response[i]["birth-number"]});
            this.options.data[1].dataPoints.push({ x: new Date(response[i]["year"], 0, 1), y: response[i]["general-fertility-rate"]});
          }
          this.chart.render();
        });
    },
    chartInstance(chart) {
      this.chart = chart;
      this.parseDataAndRenderChart("https://canvasjs.com/data/gallery/vuejs/birth-rate-usa.json");
    }
  }
}
</script>
<template>
    <CanvasJSChart :options="options" :style="styleOptions" @chart-ref="chartInstance"/>
</template>                              
/*main.js*/
import { createApp } from 'vue'
import App from './App.vue'

import CanvasJSChart from '@canvasjs/vue-charts';

const app = createApp(App);
app.use(CanvasJSChart); // install the CanvasJS Vuejs Chart Plugin
app.mount('#app');

Chart Customizations

You can choose between different types of line by setting lineDashType. Some other commonly used customizations in line chart includes lineColor, lineThickness, markerType, markerColor, etc.

Note   For step by step instructions, follow our Vuejs Integration Tutorial