I am currently facing an issue with passing data from an external file called data.js to the component for its usage. The error I'm encountering states that the data is not defined.
Below is the content of my data.js file:
const data = [
{
chartOptions: {
chart: {
type: "boxplot",
inverted: true,
height: 200
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [
{
name: "Observations",
data: [[100, 221, 250, 300, 411]]
},
{
name: "Company name",
color: "yellow",
type: "scatter",
data: [[0, 200]],
marker: {
fillColor: "yellow",
lineWidth: 1,
lineColor: "yellow"
}
}
]
}
},
{
chartOptions2: {
chart: {
type: "boxplot",
inverted: true,
height: 200
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [
{
name: "Observations",
data: [[120, 231, 222, 320, 321]]
},
{
name: "Company name 2",
color: "yellow",
type: "scatter",
data: [[0, 210]],
marker: {
fillColor: "yellow",
lineWidth: 1,
lineColor: "yellow"
}
}
]
}
}
];
export default data;
The problematic component where I need to access the data is shown below:
<template>
<div>
<highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
<highcharts class="hc" :options="chartOptions2" ref="chart"></highcharts>
</div>
</template>
<script>
import data from "./data.js";
export default {
data () {
return {
data
}
}
};
</script>
To experiment with this setup, you can also visit this codesandbox link.