Vue.js Range Bar Chart

Download Vue.js Chart Samples

Example shows Vuejs range bar chart with logarithmic scale over y-axis.

/* App.vue */
<script>
  export default {
    data() {
      return {
        options: {
          animationEnabled: true,
          title: {
            text: "Hearing Range of Animals",
            fontFamily: "Arial, sans-serif"
          },
          axisX: {
            interval: 1
          },
          axisY: {
            suffix: " Hz",
            logarithmic: true,
            lineThickness: 0
          },
          data: [{
            type: "rangeBar",
            indexLabel: "{y[#index]} Hz",
            toolTipContent: "<b><span style='\"'color: {color};'\"'>{label}</span></b><br>{y[0]} Hz to {y[1]} Hz",
            dataPoints: [
              { label: "Chicken", y: [125, 2000] },
              { label: "Goldfish", y: [20, 3000] },
              { label: "Catfish", y: [50, 4000] },
              { label: "Parakeet", y: [200, 8500] },
              { label: "Elephant", y: [17, 10500] },
              { label: "Owl", y: [200, 1200] },
              { label: "Horse", y: [55, 33500] },
              { label: "Raccoon ", y: [100, 40000] },
              { label: "Sheep ", y: [125, 42500] },
              { label: "Cat", y: [55, 77000] },
              { label: "Dog ", y: [64, 44000] },
              { label: "Dolphin", y: [150, 150000] }
            ]
          }]
        },
        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

logarithmicBase property can be used to customize the base of the logarithmic scale. Some other commonly used customization options include logarithmic, reversed, etc.

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