Vue.js Step Line Chart

Download Vue.js Chart Samples

Example shows Vuejs Step Line Chart with binary formatted labels using label formatter.

/* App.vue */
<script>
import * as CanvasJS  from '@canvasjs/charts';
export default {
  data() {
    return {
      options: {
        theme: "light2",
        animationEnabled: true,
        exportEnabled: true,
        title: {
          text: "Output of 3 Bit Analog to Digital Converter"
        },
        axisX: {
          title: "Timestamp (in ms)"
        },
        axisY: {
          title: "Quantized Levels (binary)",
          labelFormatter: function(e){
            return CanvasJS.formatNumber(parseInt(e.value, 10).toString(2), "000");
          },
          maximum: 7.1,
          interval: 1
        },
        toolTip: {
          contentFormatter: function (e){
            return "<b>" + e.entries[0].dataPoint.x + "ms</b>: " + CanvasJS.formatNumber(parseInt(e.entries[0].dataPoint.y, 10).toString(2), "000");
          }
        },
        data: [{
          type: "stepLine",
          dataPoints: [
            { x: 0, y: 3 },
            { x: 0.02, y: 4 },
            { x: 0.06, y: 5 },
            { x: 0.11, y: 6 },
            { x: 0.17, y: 7 },
            { x: 0.33, y: 6 },
            { x: 0.40, y: 5 },
            { x: 0.45, y: 4 },
            { x: 0.50, y: 3 },
            { x: 0.55, y: 2 },
            { x: 0.60, y: 1 },
            { x: 0.67, y: 0 },
            { x: 0.83, y: 1 },
            { x: 0.89, y: 2 },
            { x: 0.93, y: 3 }
          ]
        }]
      },
      styleOptions: {
        width: "100%",
        height: "360px"
      }
    }
  }
}
</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');

Chart Customizations

In the above example, y-axis labels are shown in binary format with the help of labelFormatter. To format the content shown in tooltip, contentFormatter is used.

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