React-chartjs-2: Update doc to show 'label inside (/middle of) doughnut' chart recipe

[palerdot]

Example code can be found at
https://codepen.io/anon/pen/xqMQQB?editors=1010

and

https://stackoverflow.com/a/43176415/1410291

It is better, if this info is reflected in README as it is super helpful. Also, thanks for this amazing react wrapper over chartjs-2

Including code sample, in case one of those source links gets broken in future

import React from 'react';
import ReactDOM from 'react-dom';
import {Doughnut} from 'react-chartjs-2';

// some of this code is a variation on https://jsfiddle.net/cmyker/u6rr5moq/
var originalDoughnutDraw = Chart.controllers.doughnut.prototype.draw;
Chart.helpers.extend(Chart.controllers.doughnut.prototype, {
  draw: function() {
    originalDoughnutDraw.apply(this, arguments);

    var chart = this.chart;
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var sum = 0;
    for (var i = 0; i < chart.config.data.datasets[0].data.length; i++) {
      sum += chart.config.data.datasets[0].data[i];
    }

    var text = sum,
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

    ctx.fillText(text, textX, textY);
  }
});

const data = {
    labels: [
        'Red',
        'Green',
        'Yellow'
    ],
    datasets: [{
        data: [300, 50, 100],
        backgroundColor: [
        '#FF6384',
        '#36A2EB',
        '#FFCE56'
        ],
        hoverBackgroundColor: [
        '#FF6384',
        '#36A2EB',
        '#FFCE56'
        ]
    }]
};

class DonutWithText extends React.Component {

  render() {
    return (
      <div>
        <h2>React Doughnut with Totalled Data</h2>
        <Doughnut data={data} />
      </div>
    );
  }
};

ReactDOM.render(
  <DonutWithText />,
  document.getElementById('root')
);

[jerairrest]

Niiiiiice. I'll get his added in the next version

[xPhantomNL]

@jerairrest What is the current status on implementing this in an actual release?

I can't seem to get the above code working (literally copy / pasted in a new file);

  Line 6:  'Chart' is not defined  no-undef
  Line 7:  'Chart' is not defined  no-undef
  Line 7:  'Chart' is not defined  no-undef

Which happen to be these 2 lines;

var originalDoughnutDraw = Chart.controllers.doughnut.prototype.draw;
Chart.helpers.extend(Chart.controllers.doughnut.prototype, {

[jerairrest]

@xPhantomNL I had it implemented on the gh pages but ran into an issue where a Chart applys plugins to all the charts in the app. (Totally a different bug)

To fix this example change,

import {Doughnut} from 'react-chartjs-2';

to

import {Doughnut, Chart} from 'react-chartjs-2';

[walkingalchemy]

@jerairrest Any chance you've made progress on plugins applying to all charts bug? I ran into it this morning and it seems to shut out the entire possibility of using plugins in an app that has more than one chart.

[akshayrawat91]

@palerdot @jerairrest The text is displaying for my PieChart as well which I don't want. How can I prevent that?

using this doughnut -
<DonutWithText data={graph} options={options} />

and using default Pie-
<Pie data={graph} />

Don't know how it is messing PieChart? Are they using same Chart type?

[palerdot]

@akshayrawat91 Sorry, I have no context your query ... Not the best person to answer

[araujo-luis]

I imported two ways. First one

import { Doughnut, Chart } from 'react-chartjs-2';

It didn't work.

"react-chartjs-2"' has no exported member 'Chart'.

Second One.

import Chart from 'react-chartjs-2';

It's imported, but got these errors

Property 'controllers' does not exist on type 'typeof ChartComponent'.
Property 'helpers' does not exist on type 'typeof ChartComponent'.

[araujo-luis]

Requiring this way, it works

const Chart = require('react-chartjs-2').Chart;

[DefKorns]

tslint fixed, although i dont seeem to be able to change the the text color, it's always black

```typescript
const Chart = require('react-chartjs-2').Chart;

const originalDoughnutDraw = Chart.controllers.doughnut.prototype.draw;
Chart.helpers.extend(Chart.controllers.doughnut.prototype, {
draw() {
originalDoughnutDraw.apply(this, arguments);

    const chart = this.chart;
    const width = chart.width;
    const height = chart.height;
    const ctx = chart.ctx;

    const fontSize = (height / 114).toFixed(2);
    ctx.font = `${fontSize}em sans-serif`;
    ctx.textBaseline = 'middle';

    let sum = 0;
    for (let i = 0; i < chart.config.data.datasets[0].data.length; i++) {
        sum += chart.config.data.datasets[0].data[i];
    }

    const text = `${sum} MB`;
    const textX = Math.round((width - ctx.measureText(text).width) / 2);
    const textY = height / 2;

    ctx.fillText(text, textX, textY);
}

});

[nguyenkhoi2806]

Your solution is good, but it can't update with dynamic value. it always be override !!!.

[benebsiny]

@DefKorns Add ctx.fillStyle = '{your color}' to change the font color.