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');
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.