react-chartjs-2のカスタマイズをしたい

Question

react-chartjs-2のカスタマイズをしたいと思っています。

具体的には下記2点を実現したいと思っています。

1）ツールチップを表示させつづけさせて、（今はタップしないと表示されないので）
なおかつツールチップの色や位置をカスタマイズしたい
（もしそれが難しいようであれば、ツールチップをずっと非表示にして、自作のツールチップを置こうかと考えています。）
理想は前者です。

2）ｙ軸のラベルを消したい(0, 50, 100, 150を消したい)
下の画像をご参照ください。

ソースコード

自分でここまで書きました

import React from 'react'
import PropTypes from 'prop-types'
import { Bar } from 'react-chartjs-2'


class BarChart extends React.Component {
  render() {
    const data = {
      labels: ['項目A', '項目B', '項目C'],
      datasets: [{
        data: [38, 125, 75],　//dummyデータ
        backgroundColor: ['#f4640b', '#4f92cb', '#b8cb4f'],
      }]
    }

    return (
      <div className="area_report_bar">
        <Bar data={data}
          width={300}
          height={200}
          options={{
            maintainAspectRatio: false,
            legend: {
              display: false
            },
            scales: {
              yAxes: [{
                ticks: {
                  max: this.props.maxY,
                  min: 0,
                  stepSize: 50
                }
              }]
            }
          }}
        />
      </div>
    )
  }
}

BarChart.propTypes = {
  ChartBar: PropTypes.node
}

export default BarChart

現在は下記の感じになっています。

いろいろと試しましたが
1）と2）がどうも実現できません。。

react-chartjs-2にお詳しい方がいらしたら、教えていただけますと大変、助かります。

何卒宜しくお願いたします。

Answer 1

react-chartjs-2は知らないですが，単にchart.jsのreact用ラッパーなのでchart.jsについて調べればいいですね．

1）ツールチップを表示させつづけさせて、（今はタップしないと表示されないので）

なおかつツールチップの色や位置をカスタマイズしたい

常に表示するならtooltipというよりはdata labelですね．
ということでchartjs-plugin-datalabelsという公式のプラグインがありますので，それを使うほうが(個人的には)いいと思います。

スタイルも色々指定できるようです．
Options - chartjs-plugin-datalabels

2）ｙ軸のラベルを消したい(0, 50, 100, 150を消したい)

scales.yAxes.ticks.displayをfalseにするとできます．

javascript - Remove x-axis label/text in chart.js - Stack Overflow
Axes - Chart.js documentation

質問文のコードをもとに改変しました．
CodeSandbox Demo

Comments

[gksh7]

今回もありがとうございます。
大変、勉強になりました。

参考URLおよびコードも書いていただいて、実現したいことができました。
オプションで実際にスタイルも変えてみました。
期待通りな感じです！

また、他にも、種類の違ったグラフを実装する予定ですので
今後にも大変活かせると思います。

感謝申し上げます。
ありがとうございました。