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')
);
Source: stackoverflow.com
Related Query
- Overlay text message on top of a chart
- Chart.js 3.3.0 - Draw text on top of chart
- Chart.js stacked bar chart text on top of the stacked bars
- How to add text inside the doughnut chart using Chart.js?
- Chart Js change text label orientation on Ox axis
- chartjs datalabels change font and color of text displaying inside pie chart
- How to add text in centre of the doughnut chart using Chart.js?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart js. How to align text by the center of the tooltip?
- chartjs - top and bottom padding of a chart area
- Can I specify a different font size for each row of text in Chart Title?
- ChartJs line chart - display permanent icon above some data points with text on hover
- Charts.js tooltip overlapping text on chart
- ChartJS Line chart cut off at the top and bottom
- Bold text inside doughnut chart (chart.js)
- Show "No Data" message for Pie chart with no data
- Chart JS display Data Value on the top of the Bar
- Show data on top of bar chart in Chart.js v 2.7.1
- Adding custom text to Bar Chart label values using Chart.js
- Add a custom label to the top or bottom of a stacked bar chart
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- How to show data values in top of bar chart and line chart in chart.js 3
- Add a text as tooltip for each point on a line chart
- Chart.js - How to place text outside of radar chart
- Add Text to Doughnut Chart - ChartJS
- canvas fill text vanishes when hovering over chartjs pie chart
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- Chart.js: How to get x-axis labels to show on top of bars in bar chart
- Text inside Doughnut chart using Chart.js and Angular2, Ionic2
- How to add text inside the doughnut chart using Chart.js version 3.2.1
More Query from same tag
- problem with multiple datasets in chart.js
- setInterval on myDoughnut animation
- How to format date parsed from ASPX JSON via AJAX?
- How to show dynamic dates with month name of current month and previous month in momentjs?
- Angular2 ng2-chart customizations?
- how to present on the Y axis, format hh: mm: ss Chart.js
- Pass data to Chart Js Laravel
- Chart.js with JSON data error
- ChartJS - How to change color of some data points in graph
- How to add text inside scatter plot using Chart.js?
- Create a line chart using an user input table from a data table in chart.js
- charts.js tooltips on different data ranges
- Chart doesn't render in angular 2 app
- Is there a way in chartjs to display different Boolean values with an offset in Y over a common timeline?
- Get string[] in razor view javascript from mvc controller
- Single Point Curve Chart.js
- Chart js - Customize chart
- Chart.js line chart not showing in Google Chrome canvas(only in Microsoft Edge)
- ChartJS - Different color per data point
- Dollar sign on y-axis with ChartJS
- Defining y-starting point for floating horizontal bar charts in Chart.js?
- Reanimate Data Values in CharJS
- Rails dual axis using Chartkick and chart js
- Fetch more data for line chart onZoom/onPan issues
- Can't increase font size in google bar chart
- Format array output to be readable by chartjs in Laravel
- Problem extending data series in Chart.js
- Draw a horizontal bar chart from right to left
- Charts.js doughnut
- How to make inner paddings from canvas in chart.js?