Example shows Vuejs range bar chart with logarithmic scale over y-axis.
/* App.vue */ <script> export default { data() { return { options: { animationEnabled: true, title: { text: "Hearing Range of Animals", fontFamily: "Arial, sans-serif" }, axisX: { interval: 1 }, axisY: { suffix: " Hz", logarithmic: true, lineThickness: 0 }, data: [{ type: "rangeBar", indexLabel: "{y[#index]} Hz", toolTipContent: "<b><span style='\"'color: {color};'\"'>{label}</span></b><br>{y[0]} Hz to {y[1]} Hz", dataPoints: [ { label: "Chicken", y: [125, 2000] }, { label: "Goldfish", y: [20, 3000] }, { label: "Catfish", y: [50, 4000] }, { label: "Parakeet", y: [200, 8500] }, { label: "Elephant", y: [17, 10500] }, { label: "Owl", y: [200, 1200] }, { label: "Horse", y: [55, 33500] }, { label: "Raccoon ", y: [100, 40000] }, { label: "Sheep ", y: [125, 42500] }, { label: "Cat", y: [55, 77000] }, { label: "Dog ", y: [64, 44000] }, { label: "Dolphin", y: [150, 150000] } ] }] }, 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');
logarithmicBase property can be used to customize the base of the logarithmic scale. Some other commonly used customization options include logarithmic, reversed, etc.