Vue.js Range Column Chart

Download Vue.js Chart Samples

Example shows Vuejs Range Column Chart with index / data labels

  1. /* App.vue */
  2. <script>
  3.   export default {
  4.     data() {
  5.       return {
  6.         chart: null,
  7.         options: {
  8.           theme: "light2",
  9.           title:{
  10.             text: "Average Temperature Range"
  11.           },
  12.           animationEnabled: true,
  13.           subtitles: [{
  14.             text: "Manchester, UK"
  15.           }],
  16.           axisX: {
  17.             valueFormatString: "MMM",
  18.             interval: "1",
  19.             intervalType: "month"
  20.           },
  21.           axisY: {
  22.             title: "Temperature (°C)",
  23.             suffix: "°C"
  24.           },
  25.           data: [{
  26.             type: "rangeColumn",
  27.             indexLabel: "{y[#index]}°C",
  28.             toolTipContent: "<span style='\"'color: {color};'\"'>{x}</span><br>Min: {y[0]} °C<br/> Max: {y[1]} °C",
  29.             xValueFormatString: "MMM YYYY",
  30.             dataPoints: [
  31.               { x: new Date(2021, 0, 1), y: [-5.889, 12] },
  32.               { x: new Date(2021, 1, 1), y: [-5.278, 15] },
  33.               { x: new Date(2021, 2, 1), y: [-3, 21] },
  34.               { x: new Date(2021, 3, 1), y: [-4.278, 19] },
  35.               { x: new Date(2021, 4, 1), y: [-1.389, 23] },
  36.               { x: new Date(2021, 5, 1), y: [3.222, 27] },
  37.               { x: new Date(2021, 6, 1), y: [8, 38] },
  38.               { x: new Date(2021, 7, 1), y: [6.111, 23] },
  39.               { x: new Date(2021, 8, 1), y: [4.778, 28] },
  40.               { x: new Date(2021, 9, 1), y: [1.5, 21] },
  41.               { x: new Date(2021, 10, 1), y: [-5.389, 16] },
  42.               { x: new Date(2021, 11, 1), y: [-2.222, 15] }
  43.             ]
  44.           }]
  45.         },
  46.         styleOptions: {
  47.           width: "100%",
  48.           height: "360px"
  49.         }
  50.       }
  51.     }
  52.   }
  53. </script>
  54.   
  55. <template>
  56.     <CanvasJSChart :options="options" :style="styleOptions" />
  57. </template>                              
  1. /*main.js*/
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  4.  
  5. import CanvasJSChart from '@canvasjs/vue-charts';
  6.  
  7. const app = createApp(App);
  8. app.use(CanvasJSChart); // install the CanvasJS Vuejs Chart Plugin
  9. app.mount('#app');

Chart Customizations

Indexlabels can be shown for any datapoint by setting indexLabel property. The orientation of the indexlabels can be customized using indexLabelOrientation property. Some other commonly used customization options include indexLabelFontSize, indexLableBackgroundColor, etc.

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