I'm currently working on a Vue.js Laravel application where I am trying to incorporate a bar chart using the ApexCharts module.
<apexchart ref="apexChart" :options="chartOptions" :series="chartData" type="bar"></apexchart>
Below is my code snippet:
<script>
import ApexCharts from 'apexcharts'
import axios from 'axios'
export default {
data() {
return {
daywise_sales: [],
chartData: [],
mostSellingDay: '',
leastSellingDay: '',
chartOptions: {
xaxis: {
categories: []
},
yaxis: {
title: {
text: "Sales"
}
},
chart: {
id: 'daywise_sales'
},
title: {
text: 'Day wise sales'
}
}
}
},
mounted() {
// Fetch day-wise sales data
axios.get('/shopify-day-wise-sales')
.then(response => {
this.daywise_sales = response.data.day_totals;
// Set X-axis labels
this.chartOptions.xaxis.categories = Object.keys(this.daywise_sales)
.map(date => {
return new Date(date).toLocaleString('default', {weekday: 'long'});
});
this.chartData = [{data: Object.values(this.daywise_sales)}]; // Update chart data
// Find the most and least selling days
let mostSellingDay = '';
let mostSellingDaySales = 0;
let leastSellingDay = '';
let leastSellingDaySales = Number.MAX_SAFE_INTEGER;
for (let date in this.daywise_sales) {
if (this.daywise_sales[date] > mostSellingDaySales) {
mostSellingDay = date;
mostSellingDaySales = this.daywise_sales[date];
}
if (this.daywise_sales[date] < leastSellingDaySales) {
leastSellingDay = date;
leastSellingDaySales = this.daywise_sales[date];
}
}
this.mostSellingDay = new Date(mostSellingDay).toLocaleString('default', {weekday: 'long'});
this.leastSellingDay = new Date(leastSellingDay).toLocaleString('default', {weekday: 'long'});
})
.catch(error => {
console.log(error);
});
}
}
</script>
For response.data.day_totals, the backend returns an array as shown below:
array:8 [
"2023-01-11" => 1
"2023-01-09" => 1
"2023-01-05" => 0
"2023-01-06" => 0
"2023-01-07" => 0
"2023-01-08" => 0
"2023-01-10" => 0
"2023-01-12" => 0
]
The issue is that I need to display dates in short format (Sat, Sun, Mon, Tue...etc) instead of integers on the x-axis and represent the number of sales per day on the y-axis.
Here is a snapshot of my current chart:
https://i.stack.imgur.com/Uw6Kz.png
How can I resolve my x-axis labeling concern?