Vue.js Bubble Chart in Dark Theme

Download Vue.js Chart Samples

Example show Vuejs Bubble Chart in dark theme. In case of dark theme, darker background with lighter font-color will be used. Library supports four theme - light1, light2, dark1 and dark2.

/* App.vue */
<script>
  
  export default {
    data() {
      return {
        options: {
          theme: "dark2",
          exportEnabled: true,
          title: {
            text: "Fuel Economy vs Horsepower of Sport Cars",
            fontSize: 20
          },
          axisX: {
            title: "Fuel Economy in Miles Per Gallon (MPG)"
          },
          axisY: {
            title: "Horsepower",
            includeZero: true
          },
          legend: {
            horizontalAlign: "right"
          },
          data: [
            {
              type: "bubble",
              showInLegend: true,
              legendText: "Size of bubble shows Weight of Car",
              toolTipContent: "<b>{name}</b><br> {x}: {y}",
              dataPoints: [
                { name: "Mini Cooper S", x: 30, y: 162, z: 2605 },
                { name: "Toyota 86", x: 30, y: 200, z: 2811 },
                { name: "Volkswagen GTI Autobahn", x: 29, y: 220, z: 3116 },
                { name: "Ford Fiesta ST", x: 29, y: 120, z: 2611 },
                { name: "BMW Z4 sDrive28i", x: 28, y: 240, z: 3250 },
                { name: "Volkswagen GLI Autobahn", x: 27, y: 184, z: 3071 },
                { name: "Porsche 718 Boxster", x: 26, y: 350, z: 3059 },
                { name: "Audi TT 2.0T", x: 26, y: 292, z: 3220 },
                { name: "Ford Mustang Premium", x: 25, y: 460, z: 3720 },
                { name: "Ford Focus ST", x: 25, y: 160, z: 3100 },
                { name: "BMW M235i", x: 25, y: 248, z: 3571 }
              ]
            }
          ]
        },
        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 customize the background color for chart using backgroundColor property. Similarly, the color of axis line and grid line can be customized using lineColor and gridColor properties.

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