Hi Hubert,
I am also facing the same issue / error that the OP has faced. When I am refreshing the page I get this error. TypeError: Cannot read properties of undefined (reading 'hasOwnProperty').
I am trying to use Highcharts official npm package locally installed in your project and then show the chart on the website. My code is
Code: Select all
import React, { useEffect } from "react"
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import HighchartsExporting from 'highcharts/modules/exporting';
HighchartsExporting(Highcharts);
const ColumnChart = () => {
// useEffect(()=>{
// HighchartsExporting(Highcharts);
// },[])
const options = {
chart: {
type: "column",
height: 200,
// width:1000
},
title: {
text: "Sales Overview is $100,000",
align: "left",
x: 10,
style: {
color: "#4B5563",
fontSize: "14px",
fontWeight: "bold",
},
},
subtitle: {
text: 'Last Period<span style="color:#7cb5ec;margin:0 10px">●</span> This Period <span style="color:#434348">●</span>',
useHTML: true,
style: {
color: "#6B7280",
fontSize: "14px",
},
// symbol: 'square'
},
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
},
yAxis: {
title: {
text: "Sales",
},
},
series: [
{
name: "2019",
data: [
20000, 25000, 30000, 28000, 32000, 27000, 31000, 29000, 33000, 31000,
34000, 36000,
],
},
{
name: "2020",
data: [
30000, 35000, 38000, 36000, 39000, 37000, 40000, 42000, 41000, 43000,
40000, 45000,
],
},
],
credits: {
enabled: false,
},
plotOptions: {
column: {
pointPadding: 0.01, // set the padding between each column
groupPadding: 0.05, // set the padding between each group of columns
},
},
}
return (
<div className="w-full rounded-md bg-white px-4 shadow-md">
<HighchartsReact highcharts={Highcharts} options={options} />
</div>
)
}
export default ColumnChart
-------------------------------------------------------------------
Code: Select all
import React from "react"
import ColumnChart from "@components/charts/sellers/ColumnChart"
import AddIcon from "@mui/icons-material/Add"
import ExtensionIcon from "@mui/icons-material/Extension"
import UploadFileIcon from "@mui/icons-material/UploadFile"
const Analytics = () => {
return (
<div className="w-[90] pb-8">
<nav className="my-8 ml-8 flex items-center justify-between pr-8">
<h1 className="text-3xl font-semibold">Dashboard</h1>
<div className="flex space-x-8">
<button className="rounded-full bg-andisor-blue px-3 py-2 text-sm text-white">
<div className="flex items-center">
<AddIcon style={{ width: "15px" }} />
<p>Start new order</p>
</div>
</button>
<button className="rounded-full bg-andisor-blue px-3 py-2 text-sm text-white">
<div className="flex items-center space-x-2">
<AddIcon style={{ width: "15px" }} />
<p>Add new product</p>
</div>
</button>
<button className="rounded-full px-2 py-2 text-sm ">
<div className="flex items-center space-x-2">
<ExtensionIcon style={{ width: "15px" }} />
<p>Manage Integrations</p>
</div>
</button>
<button className="rounded-full px-2 py-2 text-sm ">
<div className="flex items-center space-x-2">
<UploadFileIcon style={{ width: "15px" }} />
<p>Export CSV</p>
</div>
</button>
</div>
</nav>
<div className="flex flex-col">
<div id="AnalyticsPage" className=" ml-8 mt-8 flex space-x-6">
<div className="flex flex-col space-y-2 rounded-xl border px-8 py-4 shadow-md">
<h1 className=" text-sm text-gray-600">Earnings (before tax)</h1>
<h1 className="text-xl font-semibold">$3000</h1>
<h1 className=" text-sm text-gray-600">
after associating vendor fees
</h1>
</div>
<div className="flex flex-col space-y-2 rounded-xl border px-8 py-4 shadow-md">
<h1 className=" text-sm text-gray-600">Your balance</h1>
<h1 className="text-xl font-semibold">$4000</h1>
<h1 className=" text-sm text-gray-600">
Will be processed on Feb 15, 2021
</h1>
</div>
<div className="flex flex-col space-y-2 rounded-xl border px-8 py-4 shadow-md">
<h1 className=" text-sm text-gray-600">pending Orders</h1>
<h1 className="text-xl font-semibold">08</h1>
<h1 className=" text-sm text-gray-600">7/3/2020 - 8/1/2020</h1>
</div>
</div>
<div>{/* date */}</div>
<div className="mt-8 flex space-x-3">
{/* 2nd section */}
<div className=" ml-8 flex flex-col space-y-2">
<div className="flex flex-col space-y-2 rounded-xl border bg-andisor-blue px-8 py-5 text-white shadow-md">
<h1 className=" text-sm">Number of orders</h1>
<h1 className="text-xl font-semibold">501</h1>
</div>
<div className="flex flex-col space-y-2 rounded-xl border px-8 py-5 shadow-md">
<h1 className=" text-sm text-gray-600">Total GMV</h1>
<h1 className="text-xl font-semibold">$102,352</h1>
</div>
</div>
<div className=" mx-4 w-[80%]">
<ColumnChart />
</div>
</div>
</div>
</div>
)
}
export default Analytics
------------------------------------------
my package.json has
"highcharts": "^11.0.1",
"highcharts-exporting": "^0.1.7",
"highcharts-more": "^0.1.7",
"highcharts-react-official": "^3.2.0",