62 lines
1.1 KiB
TypeScript
62 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import Chart from "react-apexcharts";
|
|
|
|
const LineChart: React.FC = () => {
|
|
const series = [
|
|
{
|
|
name: "Desktops",
|
|
data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
|
|
},
|
|
];
|
|
|
|
const options: any = {
|
|
chart: {
|
|
height: 350,
|
|
type: "line",
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
curve: "straight",
|
|
},
|
|
title: {
|
|
text: "Product Trends by Month",
|
|
align: "left",
|
|
},
|
|
grid: {
|
|
row: {
|
|
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"Jan",
|
|
"Feb",
|
|
"Mar",
|
|
"Apr",
|
|
"May",
|
|
"Jun",
|
|
"Jul",
|
|
"Aug",
|
|
"Sep",
|
|
],
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div id="chart">
|
|
<Chart options={options} series={series} type="line" height={350} />
|
|
</div>
|
|
<div id="html-dist"></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LineChart;
|