Tailwind CSS React Chart - Horizon UI

Use our Tailwind CSS React Charts to see all your data in multiple types of data visualization. Get started with Line Chart, Line Area Chart, Bar Chart, Pie Chart, and many more.

For our dashboard 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.

Line Chart

import LineChart from "components/chart/LineChart"; 
import {lineChartDataOverallRevenue, lineChartOptionsOverallRevenue} from "variables/charts";
 
export default function Chart() {
  return (
    <LineChart
      chartData={lineChartDataOverallRevenue}
      chartOptions={lineChartOptionsOverallRevenue}
    />
  );
}

Line Area Chart

import LineAreaChart from "components/chart/LineAreaChart";
import {lineAreaChartData, lineAreaChartOptions} from "variables/charts";
 
export default function Chart() {
  return (
    <LineAreaChart
      chartData={lineAreaChartData}
      chartOptions={lineAreaChartOptions}
    />
  );
}

Bar Chart

import BarChart from "components/chart/BarChart"; 
import {barChartData, barChartOptions} from "variables/charts";
 
export default function Chart() {
  return (
    <BarChart
      chartData={barChartData}
      chartOptions={barChartOptions}
    />
  );
}

Pie Chart

import PieChart from "components/chart/PieChart"; 
import {pieChartData, pieChartOptions} from "variables/charts";
 
export default function Chart() {
  return (
    <PieChart
      chartData={pieChartData}
      chartOptions={pieChartOptions}
    />
  );
}

calendar

data tables