I am trying to create a candlestick combo chart per example shown in the ApexCharts example Apex Candlestick Charts
I use Vite, and am importing it from the node_modules folder via:
import ApexCharts from "apexcharts";
and then attempting to render it:
let options = {
series: [
{
data: chartData,
},
],
chart: {
type: "candlestick",
height: 300,
id: "mainCandle",
toolbar: {
autoSelected: "pan",
show: true,
},
zoom: {
enabled: true,
},
},
tooltip: {
enabled: false,
},
plotOptions: {
candlestick: {
colors: {
upward: "#3C90EB",
downward: "#DF7D46",
},
},
},
xaxis: {
type: "datetime",
},
};
chart = new ApexCharts(document.querySelector("#chart-candlestick"), options);
chart.render();
let optionsBar = {
series: [
{
name: "volume",
data: chartData,
},
],
chart: {
height: 150,
type: "candlestick",
brush: {
enabled: true,
target: "mainCandle",
autoScaleYaxis: true,
},
toolbar: {
autoSelected: "pan",
show: true,
},
zoom: {
enabled: true,
},
selection: {
enabled: true,
xaxis: {
min: new Date("01 Jul 2024").getTime(),
max: new Date("04 Sep 2024").getTime(),
},
fill: {
color: "#ccc",
opacity: 0.4,
},
stroke: {
color: "#0D47A1",
},
},
},
tooltip: {
enabled: false,
},
dataLabels: {
enabled: false,
},
plotOptions: {
bar: {
columnWidth: "80%",
colors: {
ranges: [
{
from: -1000,
to: 0,
color: "#F15B46",
},
{
from: 1,
to: 10000,
color: "#FEB019",
},
],
},
},
},
stroke: {
width: 0,
},
xaxis: {
type: "datetime",
axisBorder: {
offsetX: 13,
},
},
yaxis: {
labels: {
show: false,
},
},
};
chartBar = new ApexCharts(document.querySelector("#chart-bar"), optionsBar);
chartBar.render();`The 1st chart renders as expected, but the 2nd chart gives the error: Uncaught (in promise) ReferenceError: ApexCharts is not defined
This only seems to error out if the brush option is turned on like so:
chart: {
brush: {
enabled: true,
target: "target",
}
}Open to suggestions. =)