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>
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