Example shows Vuejs multi-series step-line chart with customized tooltip content.
/* App.vue */ <script> import * as CanvasJS from '@canvasjs/charts'; export default { data() { return { options: { theme: "dark2", animationEnabled: true, exportEnabled: true, title:{ text: "Capacity v/s Production of Crude Steel" }, subtitles:[{ text: "India" }], toolTip: { shared: true, contentFormatter: this.toolTipFormatter }, axisY: { title: "In tonne" }, data: [{ type: "stepLine", name: "Production of Crude Steel", dataPoints: [ { label: "2013-14", y: 81694 }, { label: "2014-15", y: 88979 }, { label: "2015-16", y: 89790 }, { label: "2016-17", y: 89790 }, { label: "2017-18", y: 103131 }, { label: "2018-19", y: 110923 } ] }, { type: "stepLine", name: "Capacity of Crude Steel Production", dataPoints: [ { label: "2013-14", y: 102261 }, { label: "2014-15", y: 109851 }, { label: "2015-16", y: 121970 }, { label: "2016-17", y: 128277 }, { label: "2017-18", y: 137975 }, { label: "2018-19", y: 142236 } ] }] }, styleOptions: { width: "100%", height: "360px" } } }, methods: { toolTipFormatter(e) { var content = ""; content = "<strong>" + e.entries[0].dataPoint.label + "</strong> <br/>"; for (var i = 0; i < e.entries.length; i++){ content += "<span style= \"color:"+e.entries[i].dataSeries.color + "\">" + e.entries[i].dataSeries.name + "</span>: <strong>"+ CanvasJS.formatNumber(e.entries[i].dataPoint.y, "#,###") + " tonne</strong> <br/>" ; } content += "<span style = \"color: #EF5350 \">Capacity Utilization: </span><strong>" + CanvasJS.formatNumber((e.entries[0].dataPoint.y / e.entries[1].dataPoint.y), "##.##%") + "</strong><br/>"; return content; } } } </script> <template> <CanvasJSChart :options="options" :styles="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');
The content of toolTip can be customized using contentFormatter. Some other commonly used customization options include shared tooltip, showInLegend, etc.