Aaron King

Posted on Jan 19

Getting Started with React Chartist: Creating Beautiful Charts in React

#react #webdev #tutorial #beginners

React Chartist is a React wrapper for Chartist.js, a simple responsive charting library. It provides an easy-to-use API for creating beautiful, responsive charts with minimal configuration. This guide walks through setting up and creating charts using React Chartist 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 components
Familiarity with JavaScript/TypeScript

Installation

Install React Chartist and Chartist CSS:

npm install react-chartist chartist

Or with yarn:

yarn add react-chartist chartist

Or with pnpm:

pnpm add react-chartist chartist

After installation, your package.json should include:

{
  "dependencies": {
    "react-chartist": "^0.14.0",
    "chartist": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import Chartist CSS in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'chartist/dist/chartist.min.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

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 { LineChart } from 'react-chartist';

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

  const options = {
    fullWidth: true,
    chartPadding: {
      right: 40
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Line Chart Example</h2>
      <LineChart data={data} options={options} type="Line" />
    </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 Chartist provides several chart components:

LineChart: Line charts
BarChart: Bar charts
PieChart: Pie charts
Data format: Labels and series array
Options: Chart configuration
Responsive: Automatic responsive behavior

Key concepts:

Data structure: Object with labels and series arrays
Series array: Array of arrays, each inner array is a data series
Labels: X-axis labels or pie chart labels
Options: Configure chart appearance and behavior
Type prop: Specify chart type

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import { LineChart, BarChart, PieChart } from 'react-chartist';

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

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

  const pieData = {
    labels: ['Chrome', 'Safari', 'Firefox'],
    series: [37, 19, 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>
          <LineChart data={lineData} type="Line" />
        </div>
        <div>
          <h3>Bar Chart</h3>
          <BarChart data={barData} type="Bar" />
        </div>
        <div>
          <h3>Pie Chart</h3>
          <PieChart data={pieData} type="Pie" />
        </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 from 'react';
import { LineChart, BarChart, PieChart } from 'react-chartist';

function DashboardCharts() {
  const salesData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [
      [35, 28, 34, 32, 40, 32],
      [40, 35, 38, 36, 42, 38]
    ]
  };

  const salesOptions = {
    fullWidth: true,
    chartPadding: {
      right: 40
    },
    seriesBarDistance: 10
  };

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

  const revenueOptions = {
    fullWidth: true,
    chartPadding: {
      right: 40
    }
  };

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

  const categoryOptions = {
    labelInterpolationFnc: function(value) {
      return value[0];
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Sales Dashboard</h1>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h2>Sales vs Target</h2>
          <LineChart
            data={salesData}
            options={salesOptions}
            type="Line"
          />
        </div>
        <div>
          <h2>Quarterly Revenue</h2>
          <BarChart
            data={revenueData}
            options={revenueOptions}
            type="Bar"
          />
        </div>
        <div>
          <h2>Product Distribution</h2>
          <PieChart
            data={categoryData}
            options={categoryOptions}
            type="Pie"
          />
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;

Now create a product comparison chart:

// src/ProductComparisonChart.jsx
import React from 'react';
import { BarChart } from 'react-chartist';

function ProductComparisonChart() {
  const data = {
    labels: ['Product A', 'Product B', 'Product C'],
    series: [
      [120, 100, 90],
      [135, 110, 95],
      [150, 125, 105]
    ]
  };

  const options = {
    seriesBarDistance: 10,
    fullWidth: true,
    chartPadding: {
      right: 40
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Product Sales Comparison</h2>
      <BarChart
        data={data}
        options={options}
        type="Bar"
      />
    </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
Multiple series
Custom options
Responsive design

Common Issues / Troubleshooting

Chart not displaying: Make sure you've imported the Chartist CSS file. The charts require CSS for proper rendering.
Data format error: Ensure data follows the correct format with labels and series arrays. Series should be an array of arrays for multiple series.
Styling issues: Import Chartist CSS. You can also customize styles using CSS or the options object.
Multiple series: Use nested arrays in the series array. Each inner array represents a data series.
Responsive not working: Chartist is responsive by default. Use fullWidth: true in options to make charts fill their container.
Pie chart labels: Use labelInterpolationFnc in options to customize how labels are displayed in pie charts.

Next Steps

Now that you have a basic understanding of React Chartist:

Explore all available chart types
Learn about advanced chart 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/fraserxu/react-chartist

Summary

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

SEO Keywords

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

DEV Community