TriCharts

Beautiful, interactive 3D charts for React — powered by Three.js and React Three Fiber

Preview

This is a demo of the TriCharts library, showcasing a 3D bar chart rendering daily rainfall data for a year. With the days and months represented on the X and Z axes, and the rainfall amount on the Y axis, this chart provides a clear and interactive visualization of the data. The chart is fully interactive, allowing users to rotate, zoom, and click on individual bars to see detailed information.

Features

• 🚀 Performant - Built with Three.js and React Three Fiber for hardware-accelerated rendering
• 🔄 Interactive - Rotate, zoom, and click on chart elements
• 📱 Responsive - Automatically scales to fit any container size
• 🎨 Customizable - Multiple color schemes with easy styling options
• 🛠️ Simple API - Easy to use with sensible defaults

Installation

Install TriCharts along with required peer dependencies:

# Using npm
npm install tricharts react react-dom @react-three/fiber @react-three/drei three

# Using yarn
yarn add tricharts react react-dom @react-three/fiber @react-three/drei three

# Using pnpm
pnpm add tricharts react react-dom @react-three/fiber @react-three/drei three

Basic Usage

import { Bar3DChart } from "tricharts"

function App() {
  return (
    <div style={{ height: "500px", width: "100%" }}>
      <Bar3DChart data={[3, 5, 2, 7, 4]} />
    </div>
  )
}

View this chart on Storybook

Using with Next.js App Router

When using TriCharts in Next.js App Router, you must add the "use client" directive at the top of your component file, as TriCharts requires client-side rendering:

"use client" // Add this directive at the top of your file

import { Bar3DChart } from "tricharts"

function App() {
  return (
    <div style={{ height: "500px", width: "100%" }}>
      <Bar3DChart data={[3, 5, 2, 7, 4]} />
    </div>
  )
}

Responsive Layout

The chart automatically fills 100% of its parent container. Simply wrap it in a div with the desired dimensions:

<div style={{ height: "400px", width: "600px" }}>
  <Bar3DChart data={data} />
</div>

Bar Chart Examples

There is only one chart type available at the moment, which is a 3D bar chart named Bar3DChart. Below are some examples of how to use it.

Simple Bar Chart

import { Bar3DChart } from "tricharts"

const data = [12, 19, 3, 5, 9, 3, 7]

function SingleRowBar() {
  return (
    <div style={{ height: "400px" }}>
      <Bar3DChart
        data={data}
        colorScheme="random"
        xLabel="Months"
        xLabels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
      />
    </div>
  )
}

View this chart on Storybook

Multi-Series Bar Chart

import { Bar3DChart } from "tricharts"

const multiRowData = [
  [12, 19, 3, 5, 2],
  [22, 12, 15, 5, 9],
  [8, 14, 12, 7, 11],
]

function MultiRowBar() {
  return (
    <div style={{ height: "500px" }}>
      <Bar3DChart
        data={multiRowData}
        colorScheme="rainbow"
        xLabel="Categories"
        yLabel="Values"
        zLabel="Year"
        xLabels={["A", "B", "C", "D", "E"]}
        zLabels={["2022", "2023", "2024"]}
        barSpacing={1.5}
      />
    </div>
  )
}

View this chart on Storybook

Interactive Bar Chart with Click Handler

import { useState } from "react"
import { Bar3DChart } from "tricharts"

function InteractiveChart() {
  const [selectedBar, setSelectedBar] = useState(null)

  const handleBarClick = (data) => {
    setSelectedBar(data)
    console.log(`Clicked on bar with value: ${data.value}`)
  }

  return (
    <div style={{ height: "400px" }}>
      <Bar3DChart
        data={[12, 19, 3, 5, 2, 3]}
        colorScheme="random"
        onBarClick={handleBarClick}
      />
      {selectedBar && (
        <div>
          Selected bar: {selectedBar.value} (index: {selectedBar.xIndex})
        </div>
      )}
    </div>
  )
}

API Reference

Bar3DChart Props

| Prop Name | Type | Default | Description | | ------------- | ------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | data | number[] or number[][] | required | Data to visualize. Can be a 1D array for a single series or a 2D array for multiple series. | | colorScheme | String | "blue" | Color scheme for bars. Options: "blue", "green", "red", "purple", "orange", "rainbow", "random" or a hex color string like "#ff5733". | | barSpacing | number | 1 | The spacing between the bars. | | showGrid | boolean | true | Whether to show the grid lines. | | showLabels | boolean | true | Whether to show value labels on top of each bar. | | xLabel | string | undefined | Label for the X-axis. | | yLabel | string | undefined | Label for the Y-axis. | | zLabel | string | undefined | Label for the Z-axis. | | xLabels | string[] | undefined | Labels for individual X-axis ticks. | | zLabels | string[] | undefined | Labels for individual Z-axis ticks. | | maxHeight | number | 10 | Maximum height of the tallest bar. Other bars are scaled proportionally. | | onBarClick | function | undefined | Callback triggered when a bar is clicked. Receives an object with this shape: { value: number, xIndex: number, zIndex: number, xLabel: string, zLabel: string }. |

License

This project is licensed under the MIT License - see the LICENSE file for details.