0

I have implemented a pie chart using react-chartjs-2 library. I am facing issue in showing/hiding the tooltip that comes when we hover on the chart.

import React, { PropTypes } from 'react';
import {Pie} from 'react-chartjs-2';

class PieChart extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
        };
}

render() {
    let color = ['#1f77b4', '#ff7f0e'];

    let cTDcolor = {
        "Being Assessed": "#4472c4",
        "Not Started": "#ed7d31",
        "No Data": "#a5a5a5"
    };

    let chartData = [], label = [], colorCTDArray = [];
    let keyAttr = this.props.keyAttribute;
    let valueAttr = this.props.valueAttribute;
    const priorityArray = ["Low","Medium","High","Pending"];
    if(this.props.chartSeries != undefined && this.props.chartSeries != null) {
        this.props.chartSeries.sort(function(a, b){
            var firstPrio = priorityArray.indexOf(a.complexity);
            var secPrio = priorityArray.indexOf(b.complexity);
            return firstPrio -secPrio 
            });
        this.props.chartSeries.map(function(element) { 
            chartData.push(element[valueAttr]);
            label.push(element[keyAttr]);
        });
    }

    //Sorting colors...
    
    label.map(function(item) {
      colorCTDArray.push(cTDcolor[item]);
    });
    const options = {
        legend: {
          labels: {
            boxWidth: 12
          }
        },
        plugins:  {
          datalabels: {
            display: false
          }  
        }
    };
  
    let data;
        data = {
            labels: label,
            datasets: [{
                data: chartData,
                backgroundColor: colorCTDArray,
                hoverBackgroundColor: colorCTDArray
            }]
        };
    return (
        <div>
                <Pie data={data} height={this.props.height} options={options} />
        </div>
        );
    }
}

PieChart.propTypes = {
    chartSeries: React.PropTypes.array,
    height: React.PropTypes.number,
    color: React.PropTypes.array,
    keyAttribute: React.PropTypes.string,
    valueAttribute: React.PropTypes.string,
    isCTD: React.PropTypes.bool,
    isPie: React.PropTypes.bool
};

export default PieChart;

It is displaying like above with the dummy data passed from UI side: enter image description here

I don't want to show the tool tip No Data on hover of chart. It will be okay if it can hide for every state variable, or just for No Data. Both can serve my objective. I am not sure because of which object it can be displayed/hide. Can someone please help me to hide the tooltip.

0 Answers0