Example shows Vuejs multi-series range spline area chart with custom tooltip content.
/* App.vue */ <script> export default { data() { return { options: { animationEnabled: true, theme: "light2", title: { text: "Temperature Comparison" }, axisY: { title: "Temperature (°C)", suffix: "°C" }, toolTip: { shared: true }, legend: { cursor: "pointer", verticalAlign: "top", itemclick: this.toggleDataSeries }, data: [{ type: "rangeSplineArea", name: "Muscat, Oman", showInLegend: true, color: "#3949AB", yValueFormatString: "#0.#°C", toolTipContent: "{label}<br/><span style='\"'color: {color};'\"'>{name}</span>: Min: {y[0]}, Max: {y[1]}", dataPoints: [ { label: "2014", y: [19.9, 39.6] }, { label: "2015", y: [21.0, 41.2] }, { label: "2016", y: [20.7, 40.7] }, { label: "2017", y: [20.8, 40.5] }, { label: "2018", y: [21.4, 40.9] }, { label: "2019", y: [21.1, 38.5] }, { label: "2020", y: [20.5, 38.1] } ] },{ type: "rangeSplineArea", name: "Toronto, Canada", showInLegend: true, color: "#00ACC1", yValueFormatString: "#0.#°C", xValueFormatString: "MMM YYYY", toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span>: Min: {y[0]}, Max: {y[1]}", dataPoints: [ { label: "2014", y: [-8.2, 22.7] }, { label: "2015", y: [-8.1, 24.13] }, { label: "2016", y: [-7.8, 26.1] }, { label: "2017", y: [-6.6, 24.7] }, { label: "2018", y: [-6.8, 25.3] }, { label: "2019", y: [-7.8, 23.3] }, { label: "2020", y: [-6.7, 24.6] } ] }] }, styleOptions: { width: "100%", height: "360px" } } }, methods: { toggleDataSeries(e) { if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } e.chart.render(); } } } </script> <template> <CanvasJSChart :options="options" :style="styleOptions" /> </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');
Content of toolTip can be customized using the toolTipContent property. Some other commonly used customization options include showInLegend, shared tooltip, etc.