Recharts ECharts Wrapper

A TypeScript library that converts Apache ECharts JSON configuration to Recharts components, enabling you to use familiar ECharts syntax while leveraging the power of React-based Recharts with modern Shadcn styling.

Features

🔄 Schema Conversion: Automatically converts ECharts JSON to Recharts format
📊 Multiple Chart Types: Support for bar, line, area, and pie charts
📚 Stacking Support: Automatic detection and handling of stacked charts
🎨 Modern Styling: Built-in Shadcn/UI compatible styling
🎯 DOM Targeting: Render charts to specific div IDs
📝 TypeScript: Full type safety and IntelliSense support
🌐 Browser Ready: Works directly in browsers without build steps

Installation

npm install recharts-echarts-wrapper

Peer Dependencies

Make sure you have the required peer dependencies:

npm install react react-dom recharts

Quick Start

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/recharts@2.8.0/umd/Recharts.js"></script>
    <script src="https://unpkg.com/recharts-echarts-wrapper"></script>
</head>
<body>
    <div id="my-chart" style="width: 100%; height: 400px;"></div>
    
    <script>
        const chartConfig = {
            title: { text: 'Monthly Sales' },
            xAxis: {
                type: 'category',
                data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
            },
            yAxis: { type: 'value' },
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [120, 200, 150, 80, 70, 110]
            }]
        };

        // Render chart
        RechartsEChartsWrapper.renderChart({
            containerId: 'my-chart',
            data: chartConfig
        });
    </script>
</body>
</html>

React/TypeScript Usage

import { renderChart, ChartRenderer } from 'recharts-echarts-wrapper';
import type { EChartsOption } from 'recharts-echarts-wrapper';

// Direct rendering to DOM element
const chartConfig: EChartsOption = {
    title: { text: 'Sales Dashboard' },
    xAxis: {
        type: 'category',
        data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: { type: 'value' },
    series: [
        {
            name: 'Revenue',
            type: 'bar',
            data: [120000, 150000, 180000, 200000],
            stack: 'total'
        },
        {
            name: 'Profit',
            type: 'bar', 
            data: [30000, 45000, 54000, 60000],
            stack: 'total'
        }
    ]
};

// Method 1: Direct rendering
renderChart({
    containerId: 'chart-container',
    data: chartConfig,
    height: 500
});

// Method 2: React component
function MyDashboard() {
    return (
        <ChartRenderer 
            echartsOption={chartConfig}
            height={500}
            className="my-chart"
        />
    );
}

API Reference

`renderChart(options)`

Renders a chart to a specific DOM element.

interface RenderOptions {
    containerId: string;           // Target div ID
    data: EChartsOption;          // ECharts configuration
    width?: number | string;      // Chart width (default: "100%")
    height?: number | string;     // Chart height (default: 400)
    colors?: string[];            // Custom color palette
    className?: string;           // CSS classes
    style?: React.CSSProperties;  // Inline styles
}

`createChartRenderer(containerId)`

Creates a reusable renderer function for a specific container.

const chartRenderer = createChartRenderer('my-chart');

// Render different charts to the same container
chartRenderer(salesData);
chartRenderer(revenueData);

`ChartRenderer` Component

React component for direct use in JSX.

interface ChartRendererProps {
    echartsOption: EChartsOption;
    width?: number | string;
    height?: number | string;
    colors?: string[];
    className?: string;
    style?: React.CSSProperties;
}

ECharts Schema Support

Supported Chart Types

Bar Charts: type: 'bar'
Line Charts: type: 'line'
Area Charts: type: 'area'
Pie Charts: type: 'pie'

Supported Features

Basic Configuration

{
    title: {
        text: "Chart Title",
        subtext: "Chart Subtitle"
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Series 1', 'Series 2']
    }
}

Axes Configuration

{
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
    },
    yAxis: {
        type: 'value'
    }
}

Series Configuration

{
    series: [
        {
            name: 'Sales',
            type: 'bar',
            data: [120, 200, 150, 80, 70],
            stack: 'total',  // For stacked charts
            color: '#10b981' // Custom color
        }
    ]
}

Stacked Charts

{
    series: [
        {
            name: 'Product A',
            type: 'bar',
            stack: 'sales',
            data: [20, 40, 30, 50, 60]
        },
        {
            name: 'Product B', 
            type: 'bar',
            stack: 'sales',  // Same stack ID
            data: [30, 50, 40, 60, 70]
        }
    ]
}

Examples

Stacked Bar Chart

const stackedBarConfig = {
    title: { text: 'Project Status by Team' },
    xAxis: {
        type: 'category',
        data: ['Frontend', 'Backend', 'DevOps', 'QA']
    },
    yAxis: { type: 'value' },
    series: [
        {
            name: 'Completed',
            type: 'bar',
            stack: 'status',
            data: [15, 12, 8, 10],
            color: '#10b981'
        },
        {
            name: 'In Progress',
            type: 'bar',
            stack: 'status', 
            data: [5, 8, 3, 4],
            color: '#f59e0b'
        },
        {
            name: 'Pending',
            type: 'bar',
            stack: 'status',
            data: [8, 6, 12, 7],
            color: '#ef4444'
        }
    ]
};

Line Chart

const lineConfig = {
    title: { text: 'Temperature Trend' },
    xAxis: {
        type: 'category',
        data: ['00:00', '06:00', '12:00', '18:00', '24:00']
    },
    yAxis: { type: 'value' },
    series: [{
        name: 'Temperature',
        type: 'line',
        data: [18, 22, 28, 25, 20],
        color: '#3b82f6'
    }]
};

Pie Chart

const pieConfig = {
    title: { text: 'Market Share' },
    series: [{
        name: 'Market Share',
        type: 'pie',
        data: [
            { name: 'Company A', value: 335 },
            { name: 'Company B', value: 310 },
            { name: 'Company C', value: 234 },
            { name: 'Company D', value: 135 }
        ]
    }]
};

Styling

The wrapper includes built-in Shadcn-compatible styling:

Modern color palette
Responsive design
Clean typography
Subtle shadows and borders
Consistent spacing

Custom Colors

renderChart({
    containerId: 'my-chart',
    data: chartConfig,
    colors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4']
});

Browser Compatibility

Modern browsers with ES2019+ support
React 16.8+ (hooks support)
Recharts 2.0+

Development

# Install dependencies
npm install

# Build the library
npm run build

# Run development mode
npm run dev

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

MIT License - see LICENSE file for details.

Related Projects

Apache ECharts - Powerful charting library
Recharts - React charting library
Shadcn/UI - Modern React component library

Made with ❤️ for modern web development

grokify/recharts-echarts-wrapper