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');
You can change the thickness or color of line using lineThickness and lineColor property. Some other customizations include markerSize, markerType, etc.