How to change cursor style to pointer on hovering over points of the chart?

4
votes

I am using chart.js v.2. library and I am trying to change the cursor style to 'pointer' when the user is hovering over points of chart. (I am going to use this with bar, pie, line charts). It seems that there should be support for this option in charts.js v.2. but I can't find an example anywhere.

EDIT: I did not mention that I was using chart with react, to be more specific I am using this react wrapper.

I am importing e.g. chart Line import { Line } from 'react-chartjs-2';

class ChartTimelineChart extends Component {



constructor(props){
    super(props);

    this.options = {
       responsive: true,
       maintainAspectRatio: false,
       animation: {
            easing:  'easeOutCirc',
            duration: 1000
      },
      pointStyle : 'circle',
            scales: {
                 xAxes: [{
                     display: true,
                     gridLines: {display: false},
                     scaleLabel: {display: true}
                }],
                yAxes: [{
                    display: true,
                    gridLines: {display: false},
                    ticks: {beginAtZero:true},
                    scaleLabel: {display: true}
               }]
           },
      tooltips: {
        displayColors: false
      },
      legend: false
    };


   searchChart(elem, props, data) {
    //Something... 
   }

  render(){

    return (
        (this.props.selectedYears.length)
        ? (  <div>
          <Line data={this.props.selectedYearsData}
                redraw={true}
                options={this.options}
                getElementAtEvent={elem => this.searchChart(elem, this.props, this.props.selectedYearsData)} />
        </div>)
        : <Line data={{datasets: [], labels: []}}
                redraw={true}
                options={this.options} />
    )
  }
};
2
javascriptchart.js

2 Answers

11
votes

With Chart.js 2.x I use this approach. Just add this in the options:

onHover: (event, chartElement) => {
    event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}

Hope it helps.

1
votes

I just did it for a bar chart, but I believe the solution might work for you too. There's a property called "chart-hover", in which you can set a callback. It is triggered every time you enter and leave the chart bar.

This is how my canvas looks like:

<canvas id="bar-material" chart-hover="onHover" class="chart-horizontal-bar"  chart-data="chartData" chart-labels="labels" chart-series="series" chart-colors="colors" chart-options="options" chart-click="onClick" height="160">
</canvas>

This is how onHover looks on my controller:

$scope.onHover = function (points, evt) {
    if (points.length === 0) {
      evt.toElement.attributes.style.nodeValue = evt.toElement.attributes.style.nodeValue.replace("cursor: pointer;", "")
      return;
    }
    var res = evt.toElement.attributes.style.nodeValue.match(/cursor: pointer;/);
    if (res == null) {
      evt.toElement.attributes.style.nodeValue += "cursor: pointer;"
    }
};