Charts

For the charts, we used the ApexCharts library. Here are the main charts we used. The names of the chartData and chartOptions props are the exact same as in the user archive, where you can take a closer look at everything.

Import#

import BarChart from "components/Charts/BarChart"
import BubbleChart from "components/Charts/BubbleChart"
import DonutChart from "components/Charts/DonutChart"
import LineBarChart from "components/Charts/LineBarChart"
import LineChart from "components/Charts/LineChart"
import PieChart from "components/Charts/PieChart"
import PolarChart from "components/Charts/PolarChart"
import RadarChart from "components/Charts/RadarChart"
import {
barChartDataCharts1,
barChartDataCharts2,
barChartOptionsCharts1,
barChartOptionsCharts2,
bubbleChartData,
bubbleChartOptions,
donutChartDataCharts1,
donutChartOptionsCharts1,
lineBarChartData,
lineBarChartOptions,
lineChartDataCharts1,
lineChartDataCharts2,
lineChartOptionsCharts1,
lineChartOptionsCharts2,
pieChartDataCharts1,
pieChartOptionsCharts1,
polarChartDataCharts,
polarChartOptionsCharts,
radarChartDataCharts,
radarChartOptionsCharts,
} from "variables/charts"

Line-Chart 1#

function Example() {
return (
<Box>
<iframe
src="https://codesandbox.io/embed/mystifying-parm-4bwdc?fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1&editorsize=0&initialpath=line-chart-1&module=%2Fsrc%2Fcomponents%2Fcharts%2FchartData.js"
width="100%"
height="300px"
ms="-15px"
overflow="hidden"
></iframe>
</Box>
)
}
<LineChart
chartData={lineChartDataCharts1}
chartOptions={lineChartOptionsCharts1}
/>

Line-Chart 2#

function Example() {
return (
<Box>
<iframe
src="https://codesandbox.io/embed/mystifying-parm-4bwdc?fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1&editorsize=0&initialpath=line-chart-2&module=%2Fsrc%2Fcomponents%2Fcharts%2FchartData.js"
width="100%"
height="300px"
ms="-15px"
overflow="hidden"
></iframe>
</Box>
)
}
<LineChart
chartData={lineChartDataCharts2}
chartOptions={lineChartOptionsCharts2}
/>

Bar-Chart 1#

function Example() {
return (
<Box>
<iframe
src="https://codesandbox.io/embed/mystifying-parm-4bwdc?fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1&editorsize=0&initialpath=bar-chart-1&module=%2Fsrc%2Fcomponents%2Fcharts%2FchartData.js"
width="100%"
height="300px"
ms="-15px"
overflow="hidden"
></iframe>
</Box>
)
}
<BarChart
chartData={barChartDataCharts1}
chartOptions={barChartOptionsCharts1}
/>

Bar-Chart 2#

function Example() {
return (
<Box>
<iframe
src="https://codesandbox.io/embed/mystifying-parm-4bwdc?fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1&editorsize=0&initialpath=bar-chart-2&module=%2Fsrc%2Fcomponents%2Fcharts%2FchartData.js"
width="100%"
height="300px"
ms="-15px"
overflow="hidden"
></iframe>
</Box>
)
}
<barChartDataCharts1
chartData={barChartDataCharts2}
chartOptions={barChartOptionsCharts2}
/>

Mixed-Chart#

function Example() {
return (
<Box>
<iframe
src="https://codesandbox.io/embed/mystifying-parm-4bwdc?fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1&editorsize=0&initialpath=mixed-chart&module=%2Fsrc%2Fcomponents%2Fcharts%2FchartData.js"
width="100%"
height="300px"
ms="-15px"
overflow="hidden"
></iframe>
</Box>
)
}
<LineBarChart chartData={lineBarChartData} chartOptions={lineBarChartOptions} />

Bubble-Chart#

function Example() {
return (
<Box>
<iframe
src="https://codesandbox.io/embed/mystifying-parm-4bwdc?fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1&editorsize=0&initialpath=bubble-chart&module=%2Fsrc%2Fcomponents%2Fcharts%2FchartData.js"
width="100%"
height="300px"
ms="-15px"
overflow="hidden"
></iframe>
</Box>
)
}
<BubbleChart chartData={bubbleChartData} chartOptions={bubbleChartOptions} />

Donut-Chart#

function Example() {
return (
<Box>
<iframe
src="https://codesandbox.io/embed/mystifying-parm-4bwdc?fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1&editorsize=0&initialpath=donut-chart&module=%2Fsrc%2Fcomponents%2Fcharts%2FchartData.js"
width="100%"
height="300px"
ms="-15px"
overflow="hidden"
></iframe>
</Box>
)
}
<DonutChart
chartData={donutChartDataCharts1}
chartOptions={donutChartOptionsCharts1}
/>

Pie-Chart#

function Example() {
return (
<Box>
<iframe
src="https://codesandbox.io/embed/mystifying-parm-4bwdc?fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1&editorsize=0&initialpath=pie-chart&module=%2Fsrc%2Fcomponents%2Fcharts%2FchartData.js"
width="100%"
height="300px"
ms="-15px"
overflow="hidden"
></iframe>
</Box>
)
}
<PieChart
chartData={pieChartDataCharts1}
chartOptions={pieChartOptionsCharts1}
/>

Radar-Chart#

function Example() {
return (
<Box>
<iframe
src="https://codesandbox.io/embed/mystifying-parm-4bwdc?fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1&editorsize=0&initialpath=radar-chart&module=%2Fsrc%2Fcomponents%2Fcharts%2FchartData.js"
width="100%"
height="300px"
ms="-15px"
overflow="hidden"
></iframe>
</Box>
)
}
<RadarChart
chartData={radarChartDataCharts}
chartOptions={radarChartOptionsCharts}
/>

Polar-Chart#

function Example() {
return (
<Box>
<iframe
src="https://codesandbox.io/embed/mystifying-parm-4bwdc?fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1&editorsize=0&initialpath=polar-chart&module=%2Fsrc%2Fcomponents%2Fcharts%2FchartData.js"
width="100%"
height="300px"
ms="-15px"
overflow="hidden"
></iframe>
</Box>
)
}
<PolarChart
chartData={polarChartDataCharts}
chartOptions={polarChartOptionsCharts}
/>

© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web

  • Creative Tim
  • Simmmple
  • Blog
  • License