Utilizing the Vue.js framework along with the Apexchart library, I have been able to create scatterplots for my data. By making use of Axios, I can successfully transmit my data and monitor it using console.log(). With the help of Apexcharts property updateChart(), I manipulate the incoming data accordingly. However, I am currently facing an issue where I am unable to populate the data array. For additional information on Apexcharts, visit the reference sample linked here.
Chart.vue
<template>
<div class="grid ml">
<div id="main">
<h1 class="header ml">SEARCH VOLUME</h1>
<apexcharts
id="chart"
height="300"
type="bar"
:options="chartOptions"
:series="series"
></apexcharts>
<button @click="updateChart">Update!</button>
</div>
</div>
</template>
<script>
import VueApexCharts from "vue-apexcharts";
import axios from "axios";
export default {
data: function() {
return {
chartOptions: {
chart: {
id: "vuechart-example",
},
colors: ["#9999CC"],
dataLabels: {
enabled: false,
style: {
colors: ["#9999CC"],
},
},
noData: {
text: "Loading...",
},
title: {
text: "lorem ipsum dolar sit amet",
align: "left",
margin: 10,
offsetX: 0,
offsetY: 0,
floating: false,
style: {
fontSize: "14px",
fontWeight: "regular",
fontFamily: "Barlow, sans-serif",
color: "#6B6B99",
},
},
xaxis: {
labels: {
style: {
colors: "#6B6B99",
fontSize: "12px",
fontFamily: "Barlow, sans-serif",
fontWeight: 400,
cssClass: "apexcharts-xaxis-label",
},
},
categories: [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC",
],
},
yaxis: {
labels: {
style: {
colors: "#6B6B99",
fontSize: "12px",
fontFamily: "Barlow, sans-serif",
fontWeight: 400,
cssClass: "apexcharts-xaxis-label",
},
},
},
},
series: [
{
name: "Company",
data: [1,2,3,4],
},
],
};
},
methods: {
updateChart() {
axios
.post("http://APIURL", {
country: "tr",
lang: "tr",
keyword: "ankara",
})
.then(({ data }) => {
this.series = [
{
data: data,
},
];
// this.series = data;
console.log("DATAAA", data);
})
.catch((e) => console.log(e));
},
},
components: {
apexcharts: VueApexCharts,
},
beforeMount() {},
};
</script>
<style lang="scss">
#chart {
display: flex;
justify-content: center;
max-width: 760px;
padding-left: 8px;
}
.ml {
font-size: 24px;
}
#main {
width: 1142px;
height: 566px;
}
</style>Browser console screen enter image description here
A challenge faced in updating the data array
series: [
{
name: "Company",
data: [1,2,3,4],
},
],