react-chart-provider is a lightweight, free, high-performance React wrapper for ReactChart with stock chart, diagram support. Perfect for financial data, time series, and interactive visualizations.

Features

• ⚡ Lightning fast rendering
• 📈 Supports all ReactChart chart types including advanced stock charts and
• � Lightweight
• 🔧 Fully customizable options
• 📅 Built-in time series support
• 🖱 Interactive elements and events

Installation

npm install react-chart-provider
# or
yarn add react-chart-provider

Basic Usage

import React from 'react';
import { ReactChartWrapper } from 'react-chart-provider';

const MyStockChart = () => {
  const options = {
    // Your chart configuration
    chart: {
      type: 'line'
    },
    series: [{
      data: [1, 2, 3, 4, 5]
    }]
  };

  return (
    <ReactChartWrapper 
      constructorType="stockChart" 
      options={options} 
    />
  );
};

export default MyStockChart;

Chart Configuration Example

import React, { useState } from 'react';
import { ReactChartWrapper } from 'react-chart-provider';

const StockChartExample = ({ graphData, curBillMonth, graphDataUOM }) => {
  const [points, setPoints] = useState({ x: null, y: null });
  const utcDate = new Date();

  const options = {
    chart: {
      marginTop: 140,
      height: 500,
      spacingTop: 10,
      spacingBottom: -60,
    },
    navigator: {
      top: 60,
      height: 60,
    },
    accessibility: {
      enabled: false,
    },
    time: {
      useUTC: true,
    },
    rangeSelector: {
      buttons: [
        {
          type: 'week',
          count: 1,
          text: '1w',
        },
        {
          type: 'all',
          text: 'All',
        },
      ],
      inputEnabled: false,
      selected: 0,
    },
    title: {
      text: `Test`,
    },
    exporting: {
      enabled: false,
    },
    xAxis: {
      type: 'datetime',
      tickInterval: 7 * 24 * 3600 * 1000,
      labels: {
        formatter: function() {
          return ReactChart.dateFormat('%d-%m-%Y', this.value);
        },
      },
      min: Date.UTC(utcDate.getFullYear(), utcDate.getMonth(), 1),
      max: Date.UTC(utcDate.getFullYear(), utcDate.getMonth(), 8),
    },
    yAxis: {
      title: {
        text: 'Value',
      },
      opposite: false,
      tickInterval: 1,
      labels: {
        formatter: function() {
          return numberFormat(this.value);
        },
      },
    },
    tooltip: {
      shared: false,
      formatter: function() {
        const date = ReactChart.dateFormat('%d-%m-%Y %H:%M:%S', this.x);
        const value = this.points[0].y;
        const formattedValue = value.toFixed(3);
        return `${date}<br/><b>Value: ${formattedValue}</b> (${graphDataUOM})`;
      },
    },
    scrollbar: {
      enabled: false,
    },
    series: [{
      name: 'value',
      data: graphData,
      lineWidth: 1.2,
      point: {
        events: {
          click: function() {
            const date = ReactChart.dateFormat('%d/%m/%Y %H:%M:%S', this.x);
            setPoints({ x: date, y: this.y });
            setTimeout(() => setPoints({ x: null, y: null }), 1000);
          },
        },
      },
    }],
    credits: { enabled: false },
  };

  return (
    <div>
      <ReactChartWrapper 
        constructorType="stockChart" 
        options={options} 
      />
      {points.x && (
        <div className="tooltip">
          Selected: {points.x}, Value: {points.y}
        </div>
      )}
    </div>
  );
};

export default StockChartExample;

API Reference Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | constructorType | string | No | Chart type ('chart', 'stockChart', 'mapChart') | | options | Object | Yes | ReactChart configuration options | | ReactChart | Object | No | ReactChart instance (for custom builds) | | allowChartUpdate | boolean | No | Allow chart updates (default: true) | | updateArgs | Array | No | Update arguments ([redraw, animation, updatePoints]) | | containerProps | Object | No | Container div props |

Methods

Access methods via ref:

const chartRef = useRef();

<ReactChartWrapper ref={chartRef} {...props} />

// Then call:
chartRef.current.chart.update(options); // Update chart
chartRef.current.chart.destroy(); // Destroy chart

Time Series Formatting

xAxis: {
  type: 'datetime',
  labels: {
    formatter: function() {
      return ReactChart.dateFormat('%Y-%m-%d', this.value);
    }
  }
}

Tooltip Customization

tooltip: {
  formatter: function() {
    return `<b>${this.series.name}</b><br/>` +
      ReactChart.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
      `Value: <b>${this.y.toFixed(2)}</b>`;
  }
}

Responsive Configuration

responsive: {
  rules: [{
    condition: {
      maxWidth: 500
    },
    chartOptions: {
      legend: {
        enabled: false
      }
    }
  }]
}

Performance Tips

1. Disable animations for large datasets:

   plotOptions: {
     series: {
       animation: false
     }
   }

2. Use turbo threshold for performance with >1000 points:

   series: [{
     turboThreshold: 5000
   }]

3. Batch updates when data changes frequently:

   // Instead of multiple setStates, update once:
   chartRef.current.chart.update({ series: [{ data: newData }] });

License

MIT © 2022-2025