common react charting components using chart.js

Related tags

Charts react-chartjs
Overview

react-chartjs

rich interactive react charting components using chart.js including

  • Line chart
  • Bar chart
  • Radar chart
  • Polar area chart
  • Pie chart
  • Doughnut chart

view chart examples

Installation

This is a CommonJS component only (to be used with something like Webpack or Browserify)

npm install --save react-chartjs

You must also include chart.js and React as dependencies.

npm install --save [email protected]^1.1.1 react react-dom

Example Usage

var LineChart = require("react-chartjs").Line;

var MyComponent = React.createClass({
  render: function() {
    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
  }
});
  • data represents the chart data (see chart.js for details)
  • options represents the chart options (see chart.js for details)
  • all other parameters will be passed through to the canvas element
  • if data passed into the component changes, points will animate between values using chart.js' .update(). If you want the chart destroyed and redrawn on every change, pass in redraw as a prop. For example <LineChart data={this.state.chartData} redraw />

Chart References

The canvas element can be retrieved using getCanvas and the chartjs object can be retrieved using getChart.

Comments
  • intermediate value)[chartType] is not a function

    intermediate value)[chartType] is not a function

    What am I doing wrong, guys?

    var LineChart = require("react-chartjs");
    
    var MyComponent = React.createClass({
      render() {
       var chartData = {
    
      };
        return <LineChart.Line data={chartData} width="600" height="250"/>
      }
    });
    
    

    Only to get:

    intermediate value)[chartType] is not a function

    Which is at:

     classData.initializeChart = function(nextProps) {
          var Chart = require('chart.js');
          var el = ReactDOM.findDOMNode(this);
          var ctx = el.getContext("2d");
          var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
          this.state.chart = chart;
        };
    
    
    opened by SylarRuby 28
  • Options object not working

    Options object not working

    Everything is set up and the bar chart is showing, however the options are not having any effect on the chart.

    I am consuming react-chart js from a cdn

    I am including the following files:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
    <script src="https://fb.me/react-0.14.6.js"></script>
    <script src="https://fb.me/react-dom-0.14.6.js"></script>
    <script src="https://unpkg.com/[email protected]/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-chartjs/0.8.0/react-chartjs.min.js"</script>
    

    and here is my js code

    var LineChart = window['react-chartjs'].Bar;
    
    var NewGraph = React.createClass({
      render: function() {
      	var chartData =  {
    		labels: ["One", "Two", "Three"],
    		datasets: [{
                    fillColor: "rgba(265,265,265,1)",
                    backgroundColor: "rgba(265,265,265,1)",
                    highlightFill: "rgba(265,265,265,1)",
                    highlightStroke: "rgba(265,265,265,1)",
                    data: goals
                },
                {
                    fillColor: "rgba(232,28,79, 0.9)",
                    backgroundColor: "rgba(232,28,79, 0.9)",
                    highlightFill: "rgba(232,28,79, 0.9)",
                    highlightStroke: "rgba(232,28,79, 0.9)",
                    data: predictions
                }]
        };
    
    	var chartOptions: {	
        	responsive: false,
        	scales: {
        		xAxes: [{
              		stacked: true,
            	}],
    
            	yAxes: [{
             		stacked: true,
              		ticks: {
                    	beginAtZero:true
                	}
            	}]
        	}
    	}
    
        return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
      }
    });
    

    Can anyone spot anything that I have done wrong? I have also noticed that the label in the datasets object are not showing. My guess is that is down to the version of Chart JS

    opened by Pau1fitz 15
  • Compatibility with version 16 of react

    Compatibility with version 16 of react

    With the new React update I get some errors, since they have removed methods from the React core such as propTypes and createClass

    Do you plan to update this library to make it compatible?

    opened by gcardacci 14
  • v2: Assign all nextProps dataset properties to chart

    v2: Assign all nextProps dataset properties to chart

    This resolves my issue posted in https://github.com/jhudson8/react-chartjs/issues/84

    Essentially, only the data was being updated from the datasets. This PR makes its so all of the properties from the dataset are now assigned to the new chart. This will allow for things like:

    1. Updating a label
    2. Updating a fill color
    3. etc.

    It also re-introduces the redraw prop to force a re-render of the canvas.

    I have only tested this with the Line chart, so if anyone has any production apps where there make use of Doughnut charts, etc. please give this branch a whirl!

    opened by ianks 14
  • 0.2.1: Using Webpack throws: The charts were not initialized with the React instance

    0.2.1: Using Webpack throws: The charts were not initialized with the React instance

    It says in issue #3 that you wouldn't need to do the manual settings of the vars thing in 0.2.0, but I have 0.2.1 installed via NPM, and still getting this issue on a very simple example.

    Webpack doesn't have the require function at runtime, so the typeof require statements are failing in the code that should dynamically require react (https://github.com/jhudson8/react-chartjs/blob/master/vars.js#L59).

    Seems like there is an opportunity to make this a lot easier for NPM users, since react and chart.js could just be specified as peerDependencies. I may have a PR for you at some point, but perhaps you already have a better idea how this could work better.

    I noticed that react-chartjs.js is actually compiled with webpack, but I'm not sure how to provide it global.Chart and global.React. Any hints would be appreciated. Thanks.

    opened by seanadkinson 13
  • Migrate components to js classes

    Migrate components to js classes

    Since React v16.0 React.createClass was removed from the core package, https://reactjs.org/blog/2017/09/26/react-v16.0.html.

    createClass is still available using create-react-class but the suggestion from the React docs is to migrate these to JavaScript classes, https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass.

    opened by DylanMunyard 11
  • how to deploy chart v2?

    how to deploy chart v2?

    I've installed v1, then install v2 running this: npm i [email protected]://github.com/reactjs/react-chartjs.git#chartjs-v2

    now, no charts are rendered at all..

    when the route with chart (that is not visible) is changed, i get

    core.js:46 Uncaught TypeError: chart.destroy is not a function

    how to deploy chart v2 correctly?

    opened by istok20 10
  • Update() does not work with Radar Chart

    Update() does not work with Radar Chart

    I am passing in data in the render() portion of my react component to a radarchart

    <div className = "container-fluid">
         <RadarChart data={results} options={chartOptions}  width="600" height="250"/>
            </div>
    

    When the component re-renders, I get the following error: Uncaught TypeError: Cannot read property 'length' of undefined

    originating from this codeline:

     while (chart.scale.xLabels.length > nextProps.data.labels.length) {
    

    If I change my radar chart to a bar chart it works just fine. Is there something I'm missing here?

    Thanks!

    opened by phil-lauffenburger 10
  • React 0.14 compatiblity

    React 0.14 compatiblity

    Hi everyone, two things I had to change to make react-chart compatible with the latest reactjs 0.14 beta:

    1. I removed the getDOMNode() from this.refs.canvass.getDOMNode() core.js line 66.
    2. var el = this.getDOMNode();--> var ReactDOM = require('react-dom'); ReactDOM.findDOMNode(this);

    react-chartjs is working fine in reactjs 0.14 beta after that :) Just wanted to let you know in case anyone is interested.

    opened by dmr 10
  • access to npm

    access to npm

    @austinpray, @jerairrest, @benmccann when one of you guys get a chance could you please provide access to npm package. I'd like to start adding some changes, and publishing them.

    my account: https://www.npmjs.com/~jareechang

    Thanks.

    opened by Jareechang 8
  • Some es6 conversions, removed deprecated methods and added support for horizontal bar

    Some es6 conversions, removed deprecated methods and added support for horizontal bar

    as stated in the title, plenty of changes.

    Main Changes:

    1. Some ES6 conversion
    2. Removed Deprecated Methods
      • PointsAtEvent(e), AddData and removeData
    3. Add support for new Methods
      • render,getElementAtEvent, getElementsAtEvent, getDatasetAtEvent, getDatasetMeta
    4. Added support for horizontal bars
      • moved ternary expression into a dictionary method β€” convertToValidChartType
    opened by Jareechang 7
  • TypeError: Cannot read property 'offsetWidth' of undefined

    TypeError: Cannot read property 'offsetWidth' of undefined

    computeDimension node_modules/chart.js/Chart.js:30 27 | //Variables global to the chart 28 | var computeDimension = function(element,dimension) 29 | {

    30 | if (element['offset'+dimension]) 31 | { 32 | return element['offset'+dimension]; 33 | }

    TypeError: Cannot read property 'config' of undefined ChartComponent.destroyChart node_modules/react-chartjs-2/es/index.js:265 262 | // tab gets switched to the chart and uses the same data). 263 | this.saveCurrentDatasets(); 264 | var datasets = Object.values(this.datasets);

    265 | this.chartInstance.config.data.datasets = datasets; 266 | 267 | this.chartInstance.destroy(); 268 | };

    opened by kgaurav0212 0
  • Unhandled Exception

    Unhandled Exception

    TypeError: (new Chart(...))[chartType] is not a function

    This is what I'm using:

    { "name": "ui", "version": "0.1.0", "private": true, "dependencies": { "chart.js": "^2.7.3", "react": "^16.8.1", "react-chartjs": "^1.2.0", "react-dom": "^16.8.1", "react-scripts": "2.1.5", "reactstrap": "^7.1.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] }

    opened by toddpratt 1
  • fix tooltip when chart updated

    fix tooltip when chart updated

    issue: https://github.com/reactjs/react-chartjs/issues/81 now the chart will update the tooltip when the values are changed. I have tested using line chart.

    opened by agent3bood 1
  • Allow complex data values

    Allow complex data values

    Hi, is it possible to allow the data property to have an array of objects with a specific structure, like: { value: 32, [anything else] } and use the value prop to make the chart? Or define a "render" prop to be a allow a function that determines how to get the value. ( (point) => point.value )

    I'm asking this because i need to have a something in the chartElement object that i can link to a structure outside the chart. Example: having an id value for each point so that i can use to query a DB.

    Is this possible or i would have to fork the lib and costumize it?

    opened by francisco4challenge 1
  • Pan and zoom possible?

    Pan and zoom possible?

    Is it possible to pan and zoom the chart?

    I'd like to show only 12 months of data at a time. But give the user the option of panning back in time to see older data.

    opened by dcworldwide 1
Releases(v0.8.0)
Owner
React Community
React website and its localizations
React Community
Chart rendering from go-coinmarketcap's statistics log with antd and chart.js

Coinmarketcap Graph Graph rendering from go-coinmarketcap's statistics log. In addition, support searchable info table and CSV download. Sample Previe

null 8 Sep 8, 2022
Declarative and modular timeseries charting components for React

React Timeseries Charts This library contains a set of modular charting components used for building flexible interactive charts. It was built for Rea

ESnet 803 Nov 30, 2022
React Chartlet - A dead simple and tiny charting library for React

React Chartlet A dead simple and tiny React charting library Installation yarn add react-chartlet Supported Charts Sparkline Pie Bar Line Examples Ple

Stevent 5 Oct 27, 2022
πŸ“ˆ A responsive, composable react charting library with a hand-drawn style.

?? A responsive, composable react charting library with a hand-drawn style.

Victor 1.5k Nov 23, 2022
A tiny SVG react charting library

@culturehq/charts An SVG React charting library. Getting started First, add @culturehq/charts to your package.json dependencies, then install using ei

CultureHQ 15 Oct 27, 2022
React SDK for Muze charting Library

React-Muze is a React wrapper over the core Muze library. It provides React bindings for Muze and makes it easier to create charts using Muze for your React applications.

Charts.com 15 Feb 2, 2022
ReactJS component to display data as a bubble chart using d3.

react-bubble-chart-d3 ReactJS component to display data as a bubble chart using d3. Preview General Usage As you will be able to see in test in order

null 51 Nov 24, 2022
React minimal pie chart🍰 Lightweight but versatile SVG pie/donut charts for React. < 2kB gzipped.

React minimal pie chart Lightweight React SVG pie charts, with versatile options and CSS animation included. < 2kB gzipped. ?? Demo ?? . Why? Because

Andrea Carraro 338 Dec 2, 2022
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 19.3k Dec 4, 2022
React wrapper for Chart.js

Looking for maintainers!! react-chartjs-2 React wrapper for Chart.js 2 Open for PRs and contributions! UPDATE to 2.x As of 2.x we have made chart.js a

null 5.5k Nov 28, 2022
A flexible, stateless, declarative flow chart library for react.

A flexible, stateless, declarative flow chart library for react.

David Revay 1.3k Nov 21, 2022
React wrapper for Chart.js

React wrapper for Chart.js

null 5.5k Dec 5, 2022
A React chart library, based on G2Plot, G6, X6, L7.

A React chart library, based on G2Plot, G6, X6, L7.

Ant Design Team 1.3k Nov 29, 2022
A sweet & simple chart library for React Native that will make us feel like We're All Gonna Make It.

react-native-wagmi-charts ?? A sweet & simple chart library for React Native that will make us feel like We're All Gonna Make It Features ?? Line char

CoinJar 354 Nov 25, 2022
React component to display a score with a doughnut chart

React Score Indicator React component to display a score with a doughnut chart Demo Install npm install --save react-score-indicator Usage import Reac

Tommaso Poletti 11 Oct 31, 2022
An extendable SVG donut chart React component

react-donut-chart An extendable SVG-based donut chart React component. Installation npm install react-donut-chart --save Usage import DonutChart from

JJ Naughton 28 Dec 7, 2022
πŸ“Š Seamless & fully customizable bar chart race component for React.

chart-race-react ?? Seamless & fully customizable bar chart race component for React. https://www.npmjs.com/package/chart-race-react . Colors Style Sp

Brian Chao 499 Nov 2, 2022
A Google Playstore like star rating chart as a React component.

react-star-rating-chart A React component that is inspired by the Google Play Store start rating chart. under construction This component is not maint

mat 4 Sep 19, 2022
Ideapedyudi-charts - Test package chart with react.js

Ideapedyudi-charts - Test package chart with react.js

Muhammad Wahyudi 1 Jan 22, 2022