react-chartjsx

Official React chart.js components.

Usage no npm install needed!

<script type="module">
  import reactChartjsx from 'https://cdn.skypack.dev/react-chartjsx';
</script>

README

react-chartjsx

Official React chart.js components.

Installation using npm

npm install react-chartjsx chart.js --save

Usage

import { Bar, Line } from 'react-chartjsx'

<Bar data={this.state.barChartData} 
     options={chartOptions} 
     width={800} 
     height={400} />

<Line data={this.state.lineChartData} 
      options={chartOptions} 
      width={400} 
      height={400} />

Properties

  • data: PropTypes.object.isRequired
  • width: PropTypes.number
  • height: PropTypes.number
  • options: PropTypes.object
  • redraw: PropTypes.bool
  • getDatasetAtEvent: PropTypes.func
  • getElementAtEvent: PropTypes.func
  • getElementsAtEvent: PropTypes.func
  • getChart: PropTypes.func
  • getCanvas: PropTypes.func

Custom size

To custom size you need to set responsive to false.

const chartOptions = {
  responsive: false
}

<Bar data={this.state.chartDataBar} 
     options={chartOptions} 
     width={800} 
     height={400} />

Events

getDatasetAtEvent

Looks for the element under the event point, then returns all elements from that dataset. This is used internally for 'dataset' mode highlighting

const chartOptions = {
  responsive: false
}

<Bar data={this.state.barChartData} 
     options={chartOptions} 
     width={800} 
     height={400} 
     getDatasetAtEvent={(dataset, event) => {console.log(dataset)}} />

getElementAtEvent

Calling getElementAtEvent(event) on your Chart instance passing an argument of an event, will return the single element at the event position. If there are multiple items within range, only the first is returned.

const chartOptions = {
  responsive: false
}

<Bar data={this.state.barChartData} 
     options={chartOptions} 
     width={800} 
     height={400} 
     getElementAtEvent={(elems, event) => {console.log(elems)}} />

getElementsAtEvent

A function to be called when mouse clicked on chart elememts, will return all element at that point as an array.

const chartOptions = {
  responsive: false
}

<Bar data={this.state.barChartData} 
     options={chartOptions} 
     width={800} 
     height={400} 
     getElementsAtEvent={(elems, event) => {console.log(elems)}} />

getChart

A function to be called for getting chartjs object.

const chartOptions = {
  responsive: false
}

<Bar data={this.state.barChartData} 
     options={chartOptions} 
     width={800} 
     height={400} 
     getChart={(chart) => {console.log(chart)}} />

getCanvas

A function to be called for getting canvas element.

const chartOptions = {
  responsive: false
}

<Bar data={this.state.barChartData} 
     options={chartOptions} 
     width={800} 
     height={400} 
     getCanvas={(canvas) => {console.log(canvas)}} />

Document

Go through document for more details.