Vue.js Multi Series Line Chart

Download Vue.js Chart Samples

Example shows Vuejs Line Chart with custom line color & images in the tooltip.

/* App.vue */
<script>
  import * as CanvasJS from '@canvasjs/charts';
  export default {
    data() {
      return {
        options: {
          theme: "light2",
          exportEnabled: true,
          title: {
            text: "Fertility Rate Comparison"
          },
          axisY: {
            title: "Fertitlity Rate"
          },
          toolTip: {
            shared: true
          },
          legend: {
            cursor: "pointer",
            itemclick: function (e) {
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
                e.chart.render();
            }
          },
          data: [{
            type: "line",
            name: "Germany",
            showInLegend: true,
            color: "#F7C705",
            toolTipContent: "<img src=\"https://canvasjs.com/wp-content/uploads/images/gallery/javascript-column-bar-charts/germany.png\" style=\"height:11px;width:18px;\"> {name}: {y}",
            dataPoints: [
              { label: "2014", y: 1.47 },
              { label: "2015", y: 1.5 },
              { label: "2016", y: 1.6 },
              { label: "2017", y: 1.57 },
              { label: "2018", y: 1.57 },
              { label: "2019", y: 1.54 }
            ]
          }, {
            type: "line",
            name: "United Kingdom",
            showInLegend: true,
            color: "#012066",
            toolTipContent: "<img src=\"https://canvasjs.com/wp-content/uploads/images/gallery/javascript-column-bar-charts/uk.png\" style=\"height:11px;width:18px;\"> {name}: {y}",
            dataPoints: [
              { label: "2014", y: 1.81 },
              { label: "2015", y: 1.80 },
              { label: "2016", y: 1.79 },
              { label: "2017", y: 1.74 },
              { label: "2018", y: 1.68 },
              { label: "2019", y: 1.65 }
            ]
          }]
        },
        styleOptions: {
          width: "100%",
          height: "360px"
        }
      }
    }
  }
</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

In the above example, images are shown in tooltip with the help of toolTip.contentFormatter. Markers can be customized using markerColor and markerType, markerSize, markerBorderColor, etc.

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