Aaron King

Posted on Jan 19

Building Interactive Charts with React Charty

#webdev #programming #beginners #tutorial

React Charty is a lightweight, flexible charting library for React that provides a simple API for creating various types of charts. It offers customization options and responsive design, making it easy to create beautiful data visualizations. This guide walks through setting up and creating charts using React Charty with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript

Installation

Install React Charty using your preferred package manager:

npm install react-charty

Or with yarn:

yarn add react-charty

Or with pnpm:

pnpm add react-charty

After installation, your package.json should include:

{
  "dependencies": {
    "react-charty": "^0.1.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Charty requires minimal setup. Import the component and you're ready to use it.

First Example / Basic Usage

Let's create a simple line chart. Create a new file src/ChartExample.jsx:

// src/ChartExample.jsx
import React from 'react';
import { Charty } from 'react-charty';

function ChartExample() {
  const data = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: 32 },
    { x: 'May', y: 40 },
    { x: 'Jun', y: 32 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic React Charty Example</h2>
      <Charty
        data={data}
        type="line"
        width={600}
        height={400}
      />
    </div>
  );
}

export default ChartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ChartExample from './ChartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChartExample />
    </div>
  );
}

export default App;

This creates a basic line chart displaying monthly sales data.

Understanding the Basics

React Charty provides a flexible charting component:

Charty component: Main chart component
Data prop: Array of data points
Type prop: Chart type (line, bar, pie, etc.)
Customization: Width, height, colors, and more
Responsive: Automatic responsive behavior

Key concepts:

Data format: Array of objects with x and y properties
Chart types: Line, bar, pie, area, etc.
Styling: Customize colors, sizes, and appearance
Props: Configure chart through props
Responsive: Charts adapt to container size

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import { Charty } from 'react-charty';

function MultipleChartsExample() {
  const lineData = [
    { x: 'Mon', y: 120 },
    { x: 'Tue', y: 132 },
    { x: 'Wed', y: 101 },
    { x: 'Thu', y: 134 },
    { x: 'Fri', y: 90 }
  ];

  const barData = [
    { x: 'Product A', y: 120 },
    { x: 'Product B', y: 200 },
    { x: 'Product C', y: 150 }
  ];

  const pieData = [
    { x: 'Chrome', y: 37 },
    { x: 'Safari', y: 19 },
    { x: 'Firefox', y: 18 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Multiple Charts Example</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h3>Line Chart</h3>
          <Charty data={lineData} type="line" width={600} height={300} />
        </div>
        <div>
          <h3>Bar Chart</h3>
          <Charty data={barData} type="bar" width={600} height={300} />
        </div>
        <div>
          <h3>Pie Chart</h3>
          <Charty data={pieData} type="pie" width={600} height={300} />
        </div>
      </div>
    </div>
  );
}

export default MultipleChartsExample;

Practical Example / Building Something Real

Let's build a comprehensive dashboard with multiple charts:

// src/DashboardCharts.jsx
import React, { useState } from 'react';
import { Charty } from 'react-charty';

function DashboardCharts() {
  const [selectedPeriod, setSelectedPeriod] = useState('monthly');

  const monthlyData = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: 32 },
    { x: 'May', y: 40 },
    { x: 'Jun', y: 32 }
  ];

  const quarterlyData = [
    { x: 'Q1', y: 97 },
    { x: 'Q2', y: 106 },
    { x: 'Q3', y: 112 },
    { x: 'Q4', y: 120 }
  ];

  const revenueData = [
    { x: 'Q1', y: 12000 },
    { x: 'Q2', y: 15000 },
    { x: 'Q3', y: 18000 },
    { x: 'Q4', y: 20000 }
  ];

  const categoryData = [
    { x: 'Product A', y: 35 },
    { x: 'Product B', y: 28 },
    { x: 'Product C', y: 34 },
    { x: 'Product D', y: 32 }
  ];

  const currentData = selectedPeriod === 'monthly' ? monthlyData : quarterlyData;

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Sales Dashboard</h1>
      <div style={{ marginBottom: '20px', textAlign: 'center' }}>
        <button
          onClick={() => setSelectedPeriod('monthly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'monthly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Monthly
        </button>
        <button
          onClick={() => setSelectedPeriod('quarterly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'quarterly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Quarterly
        </button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h2>Sales Performance</h2>
          <Charty
            data={currentData}
            type="line"
            width={800}
            height={400}
          />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
          <div>
            <h2>Quarterly Revenue</h2>
            <Charty
              data={revenueData}
              type="bar"
              width={400}
              height={300}
            />
          </div>
          <div>
            <h2>Product Distribution</h2>
            <Charty
              data={categoryData}
              type="pie"
              width={400}
              height={300}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;

Now create a product comparison chart:

// src/ProductComparisonChart.jsx
import React from 'react';
import { Charty } from 'react-charty';

function ProductComparisonChart() {
  const data = [
    { x: 'Product A', y: 120 },
    { x: 'Product B', y: 100 },
    { x: 'Product C', y: 90 },
    { x: 'Product D', y: 110 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Product Sales Comparison</h2>
      <Charty
        data={data}
        type="bar"
        width={700}
        height={400}
      />
    </div>
  );
}

export default ProductComparisonChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DashboardCharts from './DashboardCharts';
import ProductComparisonChart from './ProductComparisonChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <DashboardCharts />
      <ProductComparisonChart />
    </div>
  );
}

export default App;

This example demonstrates:

Multiple chart types
Dashboard layout
Dynamic data updates
Interactive controls
Responsive design

Common Issues / Troubleshooting

Chart not displaying: Make sure you're importing Charty correctly from 'react-charty'. Check that the data array is properly formatted.
Data format error: Ensure data is an array of objects with x and y properties. The x property can be a string or number.
Type not working: Use valid chart types: 'line', 'bar', 'pie', 'area', etc. Check the library documentation for all available types.
Styling issues: Customize width and height through props. You can also use CSS to style the container.
Responsive not working: Set width and height props. For responsive charts, use percentage-based widths or CSS.
Multiple series: React Charty supports single series by default. For multiple series, you may need to use multiple chart components or check library documentation for advanced features.

Next Steps

Now that you have an understanding of React Charty:

Explore all available chart types
Learn about advanced customization options
Customize colors and styles
Add animations
Create responsive layouts
Learn about other chart libraries (recharts, chart.js)
Check the official repository: https://github.com/99ff00/react-charty

Summary

You've successfully set up React Charty in your React application and created line charts, bar charts, pie charts, and dashboard visualizations. React Charty provides a simple, flexible solution for creating data visualizations with minimal configuration.

SEO Keywords

react-charty
React Charty
react-charty tutorial
React chart library
react-charty installation
React data visualization
react-charty example
React line chart
react-charty setup
React bar chart
react-charty customization
React pie chart
react-charty dashboard
React chart component
react-charty getting started

DEV Community