Vue.js Spline Chart

Download Vue.js Chart Samples

Example shows Vuejs spline chart with unicode text in axis title.

/* App.vue */
<script>
export default {
  data() {
    return {
      chart: null,
      options: {
        animationEnabled: true,
        exportEnabled: true,
        title:{
          text: "Average Daylight in Phoenix"
        },
        axisX: {
          title: "Months ⟶"
        },
        axisY: {
          title: "Hours ⟶"
        },
        data: [{
          type: "spline",
          yValueFormatString: "#,###.## hours",
          dataPoints: [
            { label: "Jan", y: 10 },
            { label: "Feb", y: 11 },
            { label: "Mar", y: 12 },
            { label: "Apr", y: 13 },
            { label: "May", y: 14 },
            { label: "Jun", y: 14.5 },
            { label: "Jul", y: 14 },
            { label: "Aug", y: 13.5 },
            { label: "Sep", y: 12.5 },
            { label: "Oct", y: 11.5 },
            { label: "Nov", y: 10.5 },
            { label: "Dec", y: 10 }
          ]
        }]
      },
      styleOptions: {
        width: "100%",
        height: "360px"
      }
    }
  },
  methods: {
    chartInstance(chart) {
      this.chart = chart;
    }
  }
}
</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 change the thickness or color of line using lineThickness and lineColor property. Some other customizations include markerSize, markerType, etc.

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