Vue.js Multi-Series Step-Line Chart

Download Vue.js Chart Samples

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');

Chart Customizations

The content of toolTip can be customized using contentFormatter. Some other commonly used customization options include shared tooltip, showInLegend, etc.

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