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}
/>