Example shows Vuejs StockChart with numeric values on x-axis. Library comes with options to control & customize axis parameters like auto-labelling, interval, interval-type, label-formatting, font-customizations, etc.
<!-- App.vue -->
<script>
export default {
data() {
return {
chart: null,
options: {
exportEnabled: true,
title: {
text: "Vue.js StockChart with Numeric Axis"
},
charts: [{
data: [{
type: "line",
dataPoints: this.generateRandomData()
}]
}],
rangeSelector: {
inputFields: {
startValue: 250,
endValue: 750
},
buttons: [{
label: "100",
range: 100,
rangeType: "number"
},{
label: "200",
range: 200,
rangeType: "number"
},{
label: "500",
range: 500,
rangeType: "number"
},{
label: "All",
rangeType: "all"
}]
}
},
styleOptions: {
width: "100%",
height: "450px"
}
}
},
methods:{
generateRandomData() {
var y = 1000, dps = [];
for(var i = 0; i < 1000; i++) {
y += Math.round(Math.random() * 10 - 5);
dps.push({ y: y});
}
return dps;
}
}
}
</script>
<template>
<CanvasJSStockChart :options="options" :style="styleOptions" />
</template>
/* main.js */
import { createApp } from 'vue'
import App from './App.vue'
import CanvasJSStockChart from '@canvasjs/vue-stockcharts';
const app = createApp(App);
app.use(CanvasJSStockChart);
app.mount('#app');