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');
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.