score:1

i found the almost same question and answer. it uses doughnut chart.

add text inside doughnut chart from chart js-2 in react

then i changed it from doughnut chart to line chart. it worked.

https://codepen.io/yzono/pen/zpoqkg

import react from 'react';
import reactdom from 'react-dom';
import {line} from 'react-chartjs-2';

var originaldoughnutdraw = chart.controllers.line.prototype.draw;
chart.helpers.extend(chart.controllers.line.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.fillstyle = "black";
    ctx.textbaseline = "middle";

    var text = chart.config.data.text,
        textx = math.round((width - ctx.measuretext(text).width) / 2),
        texty = height / 2;

    ctx.filltext(text, textx, texty);
  }
});

const data = {
      labels: [
        "10/04/2018",
        "10/05/2018",
        "10/06/2018",
        "10/07/2018",
        "10/08/2018",
        "10/09/2018",
        "10/10/2018",
        "10/11/2018",
        "10/12/2018",
        "10/13/2018"
      ],
      datasets: [
        {
          label: "temperature",
          data: [22, 19, 27, 23, 22, 24, 17, 25, 23, 24],
          fill: true,
          bordercolor: "#ffebee",
          backgroundcolor: "#ffebee"
        }
      ],
      text: "$3,881.38"
};

class donutwithtext extends react.component {

  render() {
    return (
      <div>
        <h2>areact doughnut with text example</h2>
        <line data={data} />
      </div>
    );
  }
};

reactdom.render(
  <donutwithtext />,
  document.getelementbyid('root')
);

Related Query

More Query from same tag