Vue.js Pyramid Chart

Download Vue.js Chart Samples

Example shows Vuejs pyramid chart which is also referred to as inverted funnel chart.

/* App.vue */
<script>
  export default {
    data() {
      return {
        options: {
          animationEnabled: true,
          title: {
          text: "Healthy Food Diet"
          },
          data: [{
            type: "pyramid",
            indexLabel: "{name}: {y}%",
            dataPoints: [
              { y: 30, name: "Bread, Cereals" },
              { y: 25, name: "Vegetables" },
              { y: 20, name: "Fruits" },
              { y: 15, name: "Meat, Fish, Milk, Egg" },
              { y: 10, name: "Fat, Oil, Sugar, Sweets" }
            ]
          }]
        },
        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

You can represent the value of the data point by using area or height (of sections) by using the valueRepresents property available at the data series level. Other customization options are indexLabelPlacement, IndexLabelFontColor, showInLegend etc.

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