Futuristic dashboard with holographic charts and a curious maine coon cat

Tremor React: Unleash Your Data Visualization Superpowers

The Orange Cat
The Orange Cat

@tremor/react is a powerful React library designed to simplify the creation of stunning charts and dashboards. It provides a comprehensive set of components that enable developers to transform raw data into visually appealing and interactive representations. Whether you’re building a complex analytics platform or a simple data visualization for your web application, @tremor/react offers the tools to bring your data to life.

Features

@tremor/react comes packed with an array of features that make it a go-to choice for data visualization in React applications:

  • Extensive Chart Types: From bar charts and line graphs to area charts and scatter plots, @tremor/react supports a wide variety of chart types to suit different data representation needs.

  • Responsive Design: All components are built with responsiveness in mind, ensuring your visualizations look great on devices of all sizes.

  • Customizable Themes: Easily adapt the look and feel of your charts and dashboards to match your application’s design language.

  • Interactive Elements: Add tooltips, legends, and other interactive features to enhance user engagement with your data.

  • TypeScript Support: Enjoy full TypeScript support for improved developer experience and type safety.

  • Accessibility: Built-in accessibility features ensure your visualizations are usable by all.

  • Performance Optimized: Efficient rendering and updates keep your application running smoothly, even with large datasets.

Installation

To get started with @tremor/react, you’ll need to install it in your React project. You can do this using npm or yarn:

Using npm:

npm install @tremor/react

Using yarn:

yarn add @tremor/react

Basic Usage

Let’s dive into some basic examples to demonstrate how easy it is to create beautiful charts with @tremor/react.

First, let’s create a simple bar chart:

import React from 'react';
import { BarChart, Card, Title } from '@tremor/react';

const data = [
  {
    name: 'Apples',
    sales: 9800,
  },
  {
    name: 'Bananas',
    sales: 4567,
  },
  {
    name: 'Oranges',
    sales: 3908,
  },
];

const BasicBarChart = () => (
  <Card>
    <Title>Fruit Sales</Title>
    <BarChart
      data={data}
      index="name"
      categories={["sales"]}
      colors={["blue"]}
      valueFormatter={(number) => `$ ${Intl.NumberFormat("us").format(number).toString()}`}
      yAxisWidth={48}
    />
  </Card>
);

export default BasicBarChart;

This code creates a simple bar chart displaying fruit sales data. The BarChart component takes care of rendering the chart based on the provided data and configuration options.

Now, let’s look at how to create a line chart:

import React from 'react';
import { LineChart, Card, Title } from '@tremor/react';

const data = [
  {
    year: 2019,
    "Product A": 2890,
    "Product B": 2338,
  },
  {
    year: 2020,
    "Product A": 2756,
    "Product B": 2103,
  },
  {
    year: 2021,
    "Product A": 3322,
    "Product B": 2194,
  },
  {
    year: 2022,
    "Product A": 3470,
    "Product B": 2108,
  },
];

const BasicLineChart = () => (
  <Card>
    <Title>Product Sales Over Time</Title>
    <LineChart
      data={data}
      index="year"
      categories={["Product A", "Product B"]}
      colors={["blue", "red"]}
      valueFormatter={(number) => `${number} units`}
      yAxisWidth={40}
    />
  </Card>
);

export default BasicLineChart;

This example demonstrates how to create a line chart comparing sales of two products over time. The LineChart component automatically handles multiple data series and provides a legend for easy interpretation.

Advanced Usage

@tremor/react isn’t limited to just basic charts. Let’s explore some more advanced features and customizations.

Custom Tooltips

You can enhance your charts with custom tooltips to provide more detailed information on hover:

import React from 'react';
import { AreaChart, Card, Title, Tooltip, TooltipProps } from '@tremor/react';

const data = [
  {
    date: "Jan 22",
    SemiAnalysis: 2890,
    "The Pragmatic Engineer": 2338,
  },
  {
    date: "Feb 22",
    SemiAnalysis: 2756,
    "The Pragmatic Engineer": 2103,
  },
  // ... more data
];

const CustomTooltip = ({ payload, active }: TooltipProps) => {
  if (!active || !payload) return null;
  return (
    <div className="w-56 rounded-tremor-default text-tremor-default bg-tremor-background p-2 shadow-tremor-dropdown border border-tremor-border">
      {payload.map((category, idx) => (
        <div key={idx} className="flex flex-1 space-x-2.5">
          <div className={`w-1 flex flex-col bg-${category.color}-500 rounded`}/>
          <div className="space-y-1">
            <p className="text-tremor-content">{category.dataKey}</p>
            <p className="font-medium text-tremor-content-emphasis">{category.value} subscribers</p>
          </div>
        </div>
      ))}
    </div>
  );
};

const AdvancedAreaChart = () => (
  <Card>
    <Title>Newsletter Subscribers</Title>
    <AreaChart
      data={data}
      index="date"
      categories={["SemiAnalysis", "The Pragmatic Engineer"]}
      colors={["indigo", "cyan"]}
      valueFormatter={(number) => `${Intl.NumberFormat("us").format(number).toString()} subscribers`}
      yAxisWidth={56}
      customTooltip={CustomTooltip}
    />
  </Card>
);

export default AdvancedAreaChart;

This example shows how to create a custom tooltip component that provides more detailed information when hovering over data points in an area chart.

Responsive Dashboards

@tremor/react also provides components for creating responsive dashboard layouts:

import React from 'react';
import { Card, Grid, Col, Text, Metric, ProgressBar } from '@tremor/react';

const stats = [
  {
    title: "Sales",
    metric: "$12,699",
    progress: 15.9,
  },
  {
    title: "Profit",
    metric: "$45,564",
    progress: 36.5,
  },
  {
    title: "Customers",
    metric: "1,072",
    progress: 53.6,
  },
];

const KpiCards = () => (
  <Grid numItemsMd={2} numItemsLg={3} className="gap-6">
    {stats.map((item) => (
      <Card key={item.title}>
        <Text>{item.title}</Text>
        <Metric>{item.metric}</Metric>
        <ProgressBar value={item.progress} className="mt-2" />
      </Card>
    ))}
  </Grid>
);

export default KpiCards;

This code creates a responsive grid of KPI cards, each displaying a metric with a progress bar. The grid automatically adjusts its layout based on the screen size.

Conclusion

@tremor/react offers a powerful and flexible solution for creating data visualizations and dashboards in React applications. With its extensive set of components, customization options, and ease of use, it empowers developers to transform complex data into compelling visual stories. Whether you’re building a simple chart or a comprehensive analytics dashboard, @tremor/react provides the tools you need to bring your data to life.

By leveraging the library’s features, such as responsive design, interactive elements, and theming capabilities, you can create engaging and informative data visualizations that enhance user experience and decision-making processes. As you continue to explore @tremor/react, you’ll discover even more ways to tailor your charts and dashboards to meet your specific needs and create truly impressive data-driven applications.

Comments