react-chartjsはChart.jsのReact componentです。

使用例

ゴール

次の線グラフを表示します。

コンポーネントを定義

index.jsx

const React = require('react')
const ReactDOM = require('react-dom')
const {Line} = require("react-chartjs")

const chartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]
}

const App = () => (
  <Line data={chartData} width="600" height="250"/>
)

ReactDOM.render(
  <App/>, document.querySelector('#container'))

動かす

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="container">
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

browserifyでビルド

babelの設定ファイルを作ります。

.babelrc

{
  "plugins": ["transform-react-jsx"]
}

ビルドします。

npm init -y
npm i -D browserify babelify babel-plugin-transform-react-jsx react react-dom react-chartjs chart.js@^1.1.1
node_modules/browserify/bin/cmd.js -t babelify index.jsx -o bundle.js

index.htmlをブラウザで開きます。

応用例：クリックイベントを拾う

コンポーネント定義

Appコンポーネントを次のように変更します。

const App = React.createClass({
  handleClick(e) {
    console.log(this.Line.getPointsAtEvent(e)[0]);
  },
  render() {
    return (<Line data={chartData} width="600" height="250" onClick={this.handleClick} ref={(ref) => this.Line = ref}/>)
  }
})

Chart.jsではeventから要素を取得するgetPointsAtEvent関数があります。react-chartjsでも使えます。
ReactではonClick属性を使って、イベントハンドラーをバインドできます。
Reactではref属性を使って、Renderした子コンポーネントのインスタンスが取得できます。

動作イメージ

グラフ上で吹き出しが表示されている位置でクリックすると、吹き出しが出ている要素の値を取得できます。

Chart.js 2.0への対応

Chart.jsの最新バージョンはv2.1.6です。
react-chartjsはv1.1.1まで対応しています。

Chart.js2.0以降への対応はchartjs-v2ブランチで開発されています。

package.jsonで、"react-chartjs": "git://github.com/venari/react-chartjs.git#chartjs-v2"のようにブランチを直接指定すれば、利用可能です。

What's the plan to upgrade to chart.js 2.0? · Issue #84 · jhudson8/react-chartjsで開発状況をみることができます。
そろそろリリースされると嬉しいですね。

react-chartjsの使い方

使用例

ゴール