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><iframesrc="https://codesandbox.io/embed/bold-marco-5d6bf?fontsize=14&hidenavigation=1&initialpath=%2Fline-chart-1&module=%2Fsrc%2FApp.js&theme=dark&view=preview"width="100%"height="300px"ms="-15px"overflow="hidden"></iframe></Box>)}
<LineChartchartData={lineChartDataCharts1}chartOptions={lineChartOptionsCharts1}/>
Line-Chart 2#
function Example() {return (<Box><iframesrc="https://codesandbox.io/embed/bold-marco-5d6bf?fontsize=14&hidenavigation=1&initialpath=%2Fline-chart-2&module=%2Fsrc%2FApp.js&theme=dark&view=preview"width="100%"height="300px"ms="-15px"overflow="hidden"></iframe></Box>)}
<LineChartchartData={lineChartDataCharts2}chartOptions={lineChartOptionsCharts2}/>
Bar-Chart 1#
function Example() {return (<Box><iframesrc="https://codesandbox.io/embed/bold-marco-5d6bf?fontsize=14&hidenavigation=1&initialpath=%2Fbar-chart-1&module=%2Fsrc%2FApp.js&theme=dark&view=preview"width="100%"height="300px"ms="-15px"overflow="hidden"></iframe></Box>)}
<BarChartchartData={barChartDataCharts1}chartOptions={barChartOptionsCharts1}/>
Bar-Chart 2#
function Example() {return (<Box><iframesrc="https://codesandbox.io/embed/bold-marco-5d6bf?fontsize=14&hidenavigation=1&initialpath=%2Fbar-chart-2&module=%2Fsrc%2FApp.js&theme=dark&view=preview"width="100%"height="300px"ms="-15px"overflow="hidden"></iframe></Box>)}
<barChartDataCharts1chartData={barChartDataCharts2}chartOptions={barChartOptionsCharts2}/>
Mixed-Chart#
function Example() {return (<Box><iframesrc="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><iframesrc="https://codesandbox.io/embed/bold-marco-5d6bf?fontsize=14&hidenavigation=1&initialpath=%2Fbubble-chart&module=%2Fsrc%2FApp.js&theme=dark&view=preview"width="100%"height="300px"ms="-15px"overflow="hidden"></iframe></Box>)}
<BubbleChart chartData={bubbleChartData} chartOptions={bubbleChartOptions} />
Donut-Chart#
function Example() {return (<Box><iframesrc="https://codesandbox.io/embed/bold-marco-5d6bf?fontsize=14&hidenavigation=1&initialpath=%2Fdonut-chart&module=%2Fsrc%2FApp.js&theme=dark&view=preview"width="100%"height="300px"ms="-15px"overflow="hidden"></iframe></Box>)}
<DonutChartchartData={donutChartDataCharts1}chartOptions={donutChartOptionsCharts1}/>
Pie-Chart#
function Example() {return (<Box><iframesrc="https://codesandbox.io/embed/bold-marco-5d6bf?fontsize=14&hidenavigation=1&initialpath=%2Fpie-chart&module=%2Fsrc%2FApp.js&theme=dark&view=preview"width="100%"height="300px"ms="-15px"overflow="hidden"></iframe></Box>)}
<PieChartchartData={pieChartDataCharts1}chartOptions={pieChartOptionsCharts1}/>
Radar-Chart#
function Example() {return (<Box><iframesrc="https://codesandbox.io/embed/bold-marco-5d6bf?fontsize=14&hidenavigation=1&initialpath=%2Fradar-chart&module=%2Fsrc%2FApp.js&theme=dark&view=preview"width="100%"height="300px"ms="-15px"overflow="hidden"></iframe></Box>)}
<RadarChartchartData={radarChartDataCharts}chartOptions={radarChartOptionsCharts}/>
Polar-Chart#
function Example() {return (<Box><iframesrc="https://codesandbox.io/embed/bold-marco-5d6bf?fontsize=14&hidenavigation=1&initialpath=%2Fpolar-chart&module=%2Fsrc%2FApp.js&theme=dark&view=preview"width="100%"height="300px"ms="-15px"overflow="hidden"></iframe></Box>)}
<PolarChartchartData={polarChartDataCharts}chartOptions={polarChartOptionsCharts}/>
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web