Eric Lewis

Posted on Jan 19

Getting Started with Rumble Charts: Creating Charts in React

#react #webdev #tutorial #beginners

Rumble Charts is a composable charting library for React that provides a simple, declarative API for creating various types of charts. It offers a flexible component-based architecture that makes it easy to build custom visualizations. This guide walks through setting up and creating charts using Rumble Charts 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 Rumble Charts using your preferred package manager:

npm install rumble-charts

Or with yarn:

yarn add rumble-charts

Or with pnpm:

pnpm add rumble-charts

After installation, your package.json should include:

{
  "dependencies": {
    "rumble-charts": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Rumble Charts requires minimal setup. Import the components and you're ready to use them.

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 { Chart, Bars, Ticks, Layer, Animate } from 'rumble-charts';

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 Rumble Charts Example</h2>
      <Chart width={600} height={400} data={data}>
        <Layer width="80%" height="70%" position="middle center">
          <Bars />
          <Ticks
            axis="x"
            ticks={{ maxTicks: 6 }}
            lineLength="100%"
            lineStyle={{ stroke: '#ccc' }}
            labelStyle={{ textAnchor: 'middle', dominantBaseline: 'text-after-edge' }}
            labelAttributes={{ y: 4 }}
          />
          <Ticks
            axis="y"
            ticks={{ maxTicks: 5 }}
            lineLength="100%"
            lineStyle={{ stroke: '#ccc' }}
            labelStyle={{ textAnchor: 'end', dominantBaseline: 'middle' }}
            labelAttributes={{ x: -4 }}
          />
        </Layer>
      </Chart>
    </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 bar chart with axes and labels.

Understanding the Basics

Rumble Charts provides composable chart components:

Chart: Main chart container
Layer: Container for chart elements
Bars, Lines, Areas: Data series components
Ticks: Axis ticks and labels
Animate: Animation wrapper
Composable: Build charts by composing components

Key concepts:

Chart component: Main container with width, height, and data
Layer component: Groups chart elements with positioning
Data format: Array of objects with x and y properties
Ticks: Configure axes with Ticks component
Styling: Customize through component props

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import { Chart, Bars, Lines, Ticks, Layer, Animate } from 'rumble-charts';

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

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

  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>Bar Chart</h3>
          <Chart width={600} height={300} data={barData}>
            <Layer width="80%" height="70%" position="middle center">
              <Bars />
              <Ticks
                axis="x"
                ticks={{ maxTicks: 3 }}
                lineLength="100%"
                lineStyle={{ stroke: '#ccc' }}
                labelStyle={{ textAnchor: 'middle', dominantBaseline: 'text-after-edge' }}
                labelAttributes={{ y: 4 }}
              />
              <Ticks
                axis="y"
                ticks={{ maxTicks: 5 }}
                lineLength="100%"
                lineStyle={{ stroke: '#ccc' }}
                labelStyle={{ textAnchor: 'end', dominantBaseline: 'middle' }}
                labelAttributes={{ x: -4 }}
              />
            </Layer>
          </Chart>
        </div>
        <div>
          <h3>Line Chart</h3>
          <Chart width={600} height={300} data={lineData}>
            <Layer width="80%" height="70%" position="middle center">
              <Lines />
              <Ticks
                axis="x"
                ticks={{ maxTicks: 5 }}
                lineLength="100%"
                lineStyle={{ stroke: '#ccc' }}
                labelStyle={{ textAnchor: 'middle', dominantBaseline: 'text-after-edge' }}
                labelAttributes={{ y: 4 }}
              />
              <Ticks
                axis="y"
                ticks={{ maxTicks: 5 }}
                lineLength="100%"
                lineStyle={{ stroke: '#ccc' }}
                labelStyle={{ textAnchor: 'end', dominantBaseline: 'middle' }}
                labelAttributes={{ x: -4 }}
              />
            </Layer>
          </Chart>
        </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 { Chart, Bars, Lines, Ticks, Layer, Animate } from 'rumble-charts';

function DashboardCharts() {
  const salesData = [
    { 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 revenueData = [
    { x: 'Q1', y: 12000 },
    { x: 'Q2', y: 15000 },
    { x: 'Q3', y: 18000 },
    { x: 'Q4', y: 20000 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Sales Dashboard</h1>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h2>Monthly Sales</h2>
          <Chart width={800} height={400} data={salesData}>
            <Animate>
              <Layer width="80%" height="70%" position="middle center">
                <Bars />
                <Ticks
                  axis="x"
                  ticks={{ maxTicks: 6 }}
                  lineLength="100%"
                  lineStyle={{ stroke: '#ccc' }}
                  labelStyle={{ textAnchor: 'middle', dominantBaseline: 'text-after-edge' }}
                  labelAttributes={{ y: 4 }}
                />
                <Ticks
                  axis="y"
                  ticks={{ maxTicks: 5 }}
                  lineLength="100%"
                  lineStyle={{ stroke: '#ccc' }}
                  labelStyle={{ textAnchor: 'end', dominantBaseline: 'middle' }}
                  labelAttributes={{ x: -4 }}
                />
              </Layer>
            </Animate>
          </Chart>
        </div>
        <div>
          <h2>Quarterly Revenue</h2>
          <Chart width={800} height={400} data={revenueData}>
            <Animate>
              <Layer width="80%" height="70%" position="middle center">
                <Lines />
                <Ticks
                  axis="x"
                  ticks={{ maxTicks: 4 }}
                  lineLength="100%"
                  lineStyle={{ stroke: '#ccc' }}
                  labelStyle={{ textAnchor: 'middle', dominantBaseline: 'text-after-edge' }}
                  labelAttributes={{ y: 4 }}
                />
                <Ticks
                  axis="y"
                  ticks={{ maxTicks: 5 }}
                  lineLength="100%"
                  lineStyle={{ stroke: '#ccc' }}
                  labelStyle={{ textAnchor: 'end', dominantBaseline: 'middle' }}
                  labelAttributes={{ x: -4 }}
                />
              </Layer>
            </Animate>
          </Chart>
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;

Now create a product comparison chart:

// src/ProductComparisonChart.jsx
import React from 'react';
import { Chart, Bars, Ticks, Layer, Animate } from 'rumble-charts';

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>
      <Chart width={700} height={400} data={data}>
        <Animate>
          <Layer width="80%" height="70%" position="middle center">
            <Bars />
            <Ticks
              axis="x"
              ticks={{ maxTicks: 4 }}
              lineLength="100%"
              lineStyle={{ stroke: '#ccc' }}
              labelStyle={{ textAnchor: 'middle', dominantBaseline: 'text-after-edge' }}
              labelAttributes={{ y: 4 }}
            />
            <Ticks
              axis="y"
              ticks={{ maxTicks: 5 }}
              lineLength="100%"
              lineStyle={{ stroke: '#ccc' }}
              labelStyle={{ textAnchor: 'end', dominantBaseline: 'middle' }}
              labelAttributes={{ x: -4 }}
            />
          </Layer>
        </Animate>
      </Chart>
    </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
Animated charts
Custom axes
Responsive design

Common Issues / Troubleshooting

Chart not displaying: Make sure you're importing components correctly from 'rumble-charts'. Check that the data array is properly formatted.
Data format error: Ensure data is an array of objects with x and y properties. Both should be present in each object.
Axes not showing: Add Ticks components inside Layer. Configure them with proper axis and styling props.
Styling issues: Customize colors and styles through component props. Use lineStyle and labelStyle for Ticks styling.
Positioning issues: Use Layer component with position prop to control chart element positioning. Use percentage-based widths and heights.
Animation not working: Wrap chart elements in Animate component to enable animations. Check that data changes trigger re-renders.

Next Steps

Now that you have a basic understanding of Rumble Charts:

Explore all available chart types
Learn about advanced configurations
Customize colors and styles
Add interactive features
Create responsive layouts
Learn about other chart libraries
Check the official repository: https://github.com/rumble-charts/rumble-charts

Summary

You've successfully set up Rumble Charts in your React application and created bar charts, line charts, and dashboard visualizations. Rumble Charts provides a composable, flexible solution for creating charts with a simple declarative API.

SEO Keywords

rumble-charts
React Rumble Charts
rumble-charts tutorial
React chart library
rumble-charts installation
React data visualization
rumble-charts example
React composable charts
rumble-charts setup
React bar chart
rumble-charts customization
React chart component
rumble-charts dashboard
React chart visualization
rumble-charts getting started

DEV Community