Chakra UI Charts - Horizon UI

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 LineChart from "components/charts/LineChart"
import PieChart from "components/charts/PieChart"
import {
  lineChartDataOverallRevenue,
  lineChartOptionsOverallRevenue,
  barChartDataDailyTraffic,
  barChartOptionsDailyTraffic,
  pieChartData,
  pieChartOptions,
} from "variables/charts"

Line Chart#

function Example() {
  return (
    <Box>
      <iframe
        src="https://codesandbox.io/embed/nice-water-1v4hzb?fontsize=14&hidenavigation=1&initialpath=%2Fline-chart-1&module=%2Fsrc%2FApp.js&theme=dark"
        width="100%"
        height="300px"
        ms="-15px"
        overflow="hidden"
      ></iframe>
    </Box>
  )
}

<LineChart
  chartData={lineChartDataOverallRevenue}
  chartOptions={lineChartOptionsOverallRevenue}
/>

Bar Chart#

function Example() {
  return (
    <Box>
      <iframe
        src="https://codesandbox.io/embed/nice-water-1v4hzb?fontsize=14&hidenavigation=1&initialpath=%2Fbar-chart-1&theme=dark"
        width="100%"
        height="300px"
        ms="-15px"
        overflow="hidden"
      ></iframe>
    </Box>
  )
}

<BarChart
  chartData={barChartDataDailyTraffic}
  chartOptions={barChartOptionsDailyTraffic}
/>

Pie-Chart#

function Example() {
  return (
    <Box>
      <iframe
        src="https://codesandbox.io/embed/nice-water-1v4hzb?fontsize=14&hidenavigation=1&initialpath=%2Fpie-chart&module=%2Fsrc%2FApp.js&theme=dark"
        width="100%"
        height="300px"
        ms="-15px"
        overflow="hidden"
      ></iframe>
    </Box>
  )
}

<PieChart chartData={pieChartData} chartOptions={pieChartOptions} />