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>
Content of toolTip can be customized using the toolTipContent property. Some other commonly used customization options include showInLegend, shared tooltip, etc.
Note For step by step instructions, follow our Vuejs Integration Tutorial