Vue.js Scatter Chart

Download Vue.js Chart Samples

Example shows Vuejs scatter chart with custom label formatting on y-axis to show currency & suffix

/* App.vue */
<script>
  
  export default {
    data() {
      return {
        options: {
          animationEnabled: true,
          zoomEnabled: true,
          exportEnabled: true,
          title:{
            text: "Real Estate Rates"
          },
          axisX: {
            title:"Area (in sq. ft)",
            minimum: 790,
            maximum: 2260
          },
          axisY:{
            title: "Price (in USD)",
            valueFormatString: "$#,##0k"
          },
          data: [{
            type: "scatter",
            toolTipContent: "<b>Area: </b>{x} sq.ft<br/><b>Price: </b>${y}k",
            dataPoints: [
              { x: 800, y: 350 },
              { x: 900, y: 450 },
              { x: 850, y: 450 },
              { x: 1250, y: 700 },
              { x: 1100, y: 650 },
              { x: 1350, y: 850 },
              { x: 1200, y: 900 },
              { x: 1410, y: 1250 },
              { x: 1250, y: 1100 },
              { x: 1400, y: 1150 },
              { x: 1500, y: 1050 },
              { x: 1330, y: 1120 },
              { x: 1580, y: 1220 },
              { x: 1620, y: 1400 },
              { x: 1250, y: 1450 },
              { x: 1350, y: 1600 },
              { x: 1650, y: 1300 },
              { x: 1700, y: 1620 },
              { x: 1750, y: 1700 },
              { x: 1830, y: 1800 },
              { x: 1900, y: 2000 },
              { x: 2050, y: 2200 },
              { x: 2150, y: 1960 },
              { x: 2250, y: 1990 }
            ]
          }]
        },
        styleOptions: {
          width: "570px",
          height: "320px"
        }
      }
    }
  }
</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

Format the axis labels in the desired string format using valueFormatString property of axis. You can prepend and append string to the axis labels using prefix and suffix property respectively.

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