Vue.js Bubble Chart with 3-Dimensional Data

Download Vue.js Chart Samples

Example shows Vuejs Bubble Chart with 3 Dimensional Data where x & y values determine bubble's position on the axes & z determines bubble size.

<script>
  
  export default {
    data() {
      return {
        options: {
          animationEnabled: true,
          exportEnabled: true,
          title: {
            text: "Planet Surface Temperature vs Distance from Sun"
          },
          axisX: {
            title: "Distance From Sun (in Million Miles)",
            logarithmic: true,
            maximum: 4000,
            labelAngle: 0,
            labelMaxWidth: 100
          },
          axisY: {
            title: "Surface Temperature (°K)"
          },
          data: [{
            type: "bubble",
            indexLabel: "{label}",
            toolTipContent: "{label}:<br>Distance From Sun: {x}mn miles<br>Avg. Surface Temp: {y} Kelvin<br>Diameter: {z} miles",
            dataPoints: [
              { label: "Mercury", x: 36, y: 452, z: 3031 },
              { label: "Venus", x: 67.2, y: 726, z: 7521 },
              { label: "Earth", x: 93, y: 285, z: 7926 },
              { label: "Mars", x: 141.6, y: 230, z: 4222 },
              { label: "Jupiter", x: 483.6, y: 120, z: 88729 },
              { label: "Saturn", x: 886.7, y: 88, z: 74600 },
              { label: "Uranus", x: 1784.0, y: 59, z: 32600 },
              { label: "Neptune", x: 2794.4, y: 48, z: 30200 }
            ]
          }]
        },
        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 change the color of marker and type of marker by using markerColor & markerType respectively. Some other commonly used customizations include markerBorderThickness, markerBorderColor, etc.

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