Skip to main content

Charts

Visualize your data with beautiful and interactive charts.

Overview​

LibreApps Desktop integrates Recharts, a composable charting library built on React components. This allows you to easily create a wide variety of charts that are highly customizable and responsive.

Supported Chart Types​

  • Line Charts: For showing trends over time.
  • Bar Charts: For comparing different categories.
  • Pie Charts: For showing proportions of a whole.
  • Area Charts: For showing cumulative totals over time.
  • Radar Charts: For comparing multiple variables across different categories.

Usage​

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  { name: 'Mar', value: 600 },
];

export function MyChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

Customization​

You can customize the appearance of your charts by changing colors, fonts, and other properties. We recommend using your theme's CSS variables to ensure that your charts match the rest of your dashboard.

Best Practices​

  • ✅ Do this: Use the ResponsiveContainer to ensure your charts work well on all screen sizes.
  • ✅ Do this: Provide clear labels and tooltips to help users understand the data.
  • ❌ Don't do this: Use too many different colors in a single chart; it can be confusing.