Vue.js Box & Whisker Chart

Download Vue.js Chart Samples

Vuejs Box & Whisker Chart uses boxes & lines to depict the distributions of one or more groups of numeric data. They are also referred to as Box Plot. Below example shows Vuejs box & whisker chart with custom label & tooltip content formatting.

/* App.vue */
<script>
  
  export default {
    data() {
      return {
        chart: null,
        options: {
          animationEnabled: true,
          title:{
            text: "Daily Sleep Statistics",
            fontFamily: "Arial, sans-serif"
          },
          subtitles: [{
            text: "Age Group 12 - 20",
            fontFamily: "Arial, sans-serif"
          }],
          axisX: {
            valueFormatString: "DDD"
          },
          axisY: {
            title: "Sleep Time (in Hours)",
            includeZero: true
          },
          data: [{
            type: "boxAndWhisker",
            xValueFormatString: "DDDD",
            yValueFormatString: "#,##0.# Hours",
            dataPoints: [
              { x: new Date(2020, 0, 5),  y: [4, 6, 8, 9, 7] },
              { x: new Date(2020, 0, 6),  y: [5, 6, 7, 8, 6.5] },
              { x: new Date(2020, 0, 7),  y: [4, 5, 7, 8, 6.5] },
              { x: new Date(2020, 0, 8),  y: [3, 5, 6, 9, 5.5] },
              { x: new Date(2020, 0, 9),  y: [6, 8, 10, 11, 8.5] },
              { x: new Date(2020, 0, 10),  y: [5, 7, 9, 12, 7.5] },
              { x: new Date(2020, 0, 11),  y: [4, 6, 8, 9, 7] }
            ]
          }]
        },
        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

Format of axis labels can be defined by setting valueFormatString property. Similarly, format for x & y-values shown in tooltip & indexlabels can be customized by setting xValueFormatString & yValueFormatString properties.

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