react-chart-provider

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

• Disable animations for large datasets:

  plotOptions: {
    series: {
      animation: false
    }
  }
  

• Use turbo threshold for performance with >1000 points:

  series: [{
    turboThreshold: 5000
  }]
  

• Batch updates when data changes frequently:

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

License

MIT © 2022-2025