Vue.js Chart with Logarithmic Axis

Download Vue.js Chart Samples

Example shows Vuejs chart with logarithmic scale (log-scale) on y-axis with logarithmic base set to 10.

  1. /* App.vue */
  2. <script>
  3. export default {
  4.   data() {
  5.     return {
  6.       options: {
  7.         animationEnabled: true,
  8.         exportEnabled: true,
  9.         theme: "light2",
  10.         title: {
  11.           text: "Change in Atmospheric Mass Density with Altitude",
  12.         },
  13.         axisX: {
  14.           title: "Altitude",
  15.           valueFormatString: "#,##0 km"
  16.         },
  17.         axisY: {
  18.           logarithmic: true, //change it to false
  19.           title: "Atmospheric Mass Density (g/cm3)",
  20.           titleFontSize: 16,
  21.           valueFormatString: "0.0#E+0"
  22.         },
  23.         data: [{
  24.           type: "line",
  25.           yValueFormatString: "0.0##E+0 g/cm3",
  26.           xValueFormatString: "#,##0 km",
  27.           name: "Atmospheric Mass Density",
  28.           dataPoints: [
  29.             { x: 0, y: 1.293 * Math.pow(10, -3) },
  30.             { x: 10, y: 3.982 * Math.pow(10, -4) },
  31.             { x: 20, y: 8.269 * Math.pow(10, -5) },
  32.             { x: 30, y: 1.554 * Math.pow(10, -5) },
  33.             { x: 40, y: 3.148 * Math.pow(10, -6) },
  34.             { x: 50, y: 8.280 * Math.pow(10, -7) },
  35.             { x: 60, y: 2.328 * Math.pow(10, -7) },
  36.             { x: 70, y: 5.761 * Math.pow(10, -8) },
  37.             { x: 80, y: 1.296 * Math.pow(10, -8) },
  38.             { x: 90, y: 2.702 * Math.pow(10, -9) },
  39.             { x: 100, y: 4.535 * Math.pow(10, -10) },
  40.             { x: 110, y: 6.809 * Math.pow(10, -11) },
  41.             { x: 120, y: 1.604 * Math.pow(10, -11) },
  42.             { x: 130, y: 6.210 * Math.pow(10, -12) },
  43.             { x: 140, y: 3.143 * Math.pow(10, -12) },
  44.             { x: 150, y: 1.825 * Math.pow(10, -12) }
  45.           ]
  46.         }]
  47.       },
  48.       styleOptions: {
  49.         width: "100%",
  50.         height: "360px"
  51.       }
  52.     }
  53.   }
  54. }
  55. </script>
  56. <template>
  57.     <CanvasJSChart :options="options" :style="styleOptions"/>
  58. </template>                              
  1. /*main.js*/
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  4.  
  5. import CanvasJSChart from '@canvasjs/vue-charts';
  6.  
  7. const app = createApp(App);
  8. app.use(CanvasJSChart); // install the CanvasJS Vuejs Chart Plugin
  9. app.mount('#app');

Chart Customizations

logarithmicBase property can be used to customize the base of the logarithmic scale. In the above example, value shown in the axis labels & the tooltip are customized by setting valueFormatString, xValueFormatString & yValueFormatString properties.

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