Eric Lewis

Posted on Jan 19

Building Interactive Charts with Smart React Chart

#react #webdev #tutorial #beginners

Smart React Chart is a comprehensive charting library for React that provides a wide range of chart types and interactive features. It offers a declarative API for creating responsive, animated charts with extensive customization options. This guide walks through setting up and creating charts using Smart React Chart with React, from installation to a working implementation. This is part 89 of a series on using Smart React Chart with React.

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
Understanding of data visualization concepts

Installation

Install Smart React Chart using your preferred package manager:

npm install smart-webcomponents-react

Or with yarn:

yarn add smart-webcomponents-react

Or with pnpm:

pnpm add smart-webcomponents-react

After installation, your package.json should include:

{
  "dependencies": {
    "smart-webcomponents-react": "^12.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Smart React Chart 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 { SmartChart } from 'smart-webcomponents-react/chart';

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

  const chartSettings = {
    caption: 'Monthly Sales',
    description: 'Sales data for the first half of the year',
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    dataSource: dataSource,
    colorScheme: 'scheme01',
    xAxis: {
      dataField: 'month',
      gridLines: { visible: true }
    },
    valueAxis: {
      visible: true,
      title: { text: 'Sales' }
    },
    seriesGroups: [
      {
        type: 'line',
        series: [
          {
            dataField: 'sales',
            displayText: 'Sales',
            lineWidth: 2
          }
        ]
      }
    ]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Smart Chart Example</h2>
      <SmartChart {...chartSettings} />
    </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 with monthly sales data.

Understanding the Basics

Smart React Chart provides a comprehensive chart component:

SmartChart component: Main chart component
dataSource prop: Chart data array
chartSettings: Chart configuration object
Chart types: Line, Bar, Area, Pie, etc.
Interactive features: Tooltips, zoom, pan, etc.

Key concepts:

Data structure: Array of objects with consistent properties
Configuration object: Configure chart through settings
Series groups: Define chart series and types
Axis configuration: Configure X and Y axes
Styling: Customize colors and appearance

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import { SmartChart } from 'smart-webcomponents-react/chart';

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

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

  const lineSettings = {
    caption: 'Line Chart',
    dataSource: lineData,
    xAxis: { dataField: 'day' },
    valueAxis: { visible: true },
    seriesGroups: [
      {
        type: 'line',
        series: [{ dataField: 'value', displayText: 'Value' }]
      }
    ]
  };

  const barSettings = {
    caption: 'Bar Chart',
    dataSource: barData,
    xAxis: { dataField: 'product' },
    valueAxis: { visible: true },
    seriesGroups: [
      {
        type: 'column',
        series: [{ dataField: 'revenue', displayText: 'Revenue' }]
      }
    ]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Multiple Charts Example</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <SmartChart {...lineSettings} />
        <SmartChart {...barSettings} />
      </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 { SmartChart } from 'smart-webcomponents-react/chart';

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

  const monthlyData = [
    { month: 'Jan', sales: 35, target: 40 },
    { month: 'Feb', sales: 28, target: 35 },
    { month: 'Mar', sales: 34, target: 38 },
    { month: 'Apr', sales: 32, target: 36 },
    { month: 'May', sales: 40, target: 42 },
    { month: 'Jun', sales: 32, target: 38 }
  ];

  const quarterlyData = [
    { quarter: 'Q1', sales: 97, target: 113 },
    { quarter: 'Q2', sales: 106, target: 116 },
    { quarter: 'Q3', sales: 112, target: 120 },
    { quarter: 'Q4', sales: 120, target: 125 }
  ];

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

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

  const currentData = selectedPeriod === 'monthly' ? monthlyData : quarterlyData;
  const xAxisField = selectedPeriod === 'monthly' ? 'month' : 'quarter';

  const salesSettings = {
    caption: 'Sales vs Target',
    dataSource: currentData,
    xAxis: { dataField: xAxisField },
    valueAxis: { visible: true, title: { text: 'Sales' } },
    seriesGroups: [
      {
        type: 'line',
        series: [
          { dataField: 'sales', displayText: 'Sales' },
          { dataField: 'target', displayText: 'Target' }
        ]
      }
    ]
  };

  const revenueSettings = {
    caption: 'Quarterly Revenue',
    dataSource: revenueData,
    xAxis: { dataField: 'quarter' },
    valueAxis: { visible: true, title: { text: 'Revenue ($)' } },
    seriesGroups: [
      {
        type: 'column',
        series: [{ dataField: 'revenue', displayText: 'Revenue' }]
      }
    ]
  };

  const pieSettings = {
    caption: 'Product Distribution',
    dataSource: categoryData,
    seriesGroups: [
      {
        type: 'pie',
        series: [
          {
            dataField: 'value',
            displayText: 'product',
            radius: 120
          }
        ]
      }
    ]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Analytics 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' }}>
        <SmartChart {...salesSettings} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
          <SmartChart {...revenueSettings} />
          <SmartChart {...pieSettings} />
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;

Now create an interactive chart with custom styling:

// src/InteractiveChart.jsx
import React from 'react';
import { SmartChart } from 'smart-webcomponents-react/chart';

function InteractiveChart() {
  const data = [
    { month: 'Jan', sales: 35, target: 40 },
    { month: 'Feb', sales: 28, target: 35 },
    { month: 'Mar', sales: 34, target: 38 },
    { month: 'Apr', sales: 32, target: 36 },
    { month: 'May', sales: 40, target: 42 },
    { month: 'Jun', sales: 32, target: 38 }
  ];

  const settings = {
    caption: 'Interactive Sales Chart',
    dataSource: data,
    xAxis: { dataField: 'month' },
    valueAxis: { visible: true, title: { text: 'Sales' } },
    seriesGroups: [
      {
        type: 'line',
        series: [
          {
            dataField: 'sales',
            displayText: 'Sales',
            lineWidth: 2,
            symbolType: 'circle',
            symbolSize: 8
          },
          {
            dataField: 'target',
            displayText: 'Target',
            lineWidth: 2,
            symbolType: 'square',
            symbolSize: 8
          }
        ]
      }
    ],
    toolTipFormatFunction: (value, itemIndex, series, group, categoryValue, categoryAxis) => {
      return `${categoryValue}: ${value}`;
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Interactive Chart</h2>
      <SmartChart {...settings} />
    </div>
  );
}

export default InteractiveChart;

Update your App.jsx:

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

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

export default App;

This example demonstrates:

Multiple chart types
Dashboard layout
Multiple series
Interactive features
Dynamic data updates
Custom tooltips
Custom styling

Common Issues / Troubleshooting

Chart not displaying: Make sure you're importing SmartChart correctly from 'smart-webcomponents-react/chart'. Check that the dataSource array is properly formatted.
Data format error: Ensure dataSource is an array of objects with consistent property names. Check that dataField values match your data properties.
Series not showing: Verify that dataField in series matches your data property names. Ensure the type prop in seriesGroups is set correctly.
Styling issues: Customize colors through colorScheme or individual series styling. Use the style property for custom styling.
Axis not configured: Set xAxis and valueAxis properties in settings. Configure them with dataField and other options.
Performance: For large datasets, consider data sampling or pagination. Smart Chart handles large datasets well, but optimization may be needed for very large datasets.

Next Steps

Now that you have an understanding of Smart React Chart:

Explore all available chart types
Learn about advanced configurations
Customize themes and styles
Add animations
Create real-time updating charts
Learn about other chart libraries
Check the official documentation: https://www.htmlelements.com/react/demos/chart/overview/

Summary

You've successfully set up Smart React Chart in your React application and created line charts, bar charts, pie charts, and dashboard visualizations. Smart React Chart provides a comprehensive solution for creating professional data visualizations with extensive customization options.

SEO Keywords

smart-react-chart
React Smart Chart
smart-react-chart tutorial
React data visualization
smart-react-chart installation
React chart library
smart-react-chart example
React Smart HTML Elements
smart-react-chart setup
React interactive charts
smart-react-chart customization
React chart component
smart-react-chart dashboard
React chart visualization
smart-react-chart getting started

DEV Community