score:0
the plugin core api offers a range of hooks that may be used for performing custom code. you can use the afterdraw
hook to draw text directly on the canvas using canvasrenderingcontext2d.filltext()
as follows:
plugins: [{
afterdraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
ctx.textalign = 'left';
ctx.textbaseline = 'middle';
ctx.font = "12px arial";
let sum = chart.config.data.datasets[0].data.reduce((v, s) => v + s, 0);
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales["y-axis-0"];
yaxis.ticks.foreach((v, i) => {
var label = chart.data.labels[i];
var value = chart.data.datasets[0].data[i];
var x = xaxis.getpixelforvalue(value) + 5;
var y = yaxis.getpixelfortick(i);
let percent = (value * 100 / sum).tofixed(2);
ctx.filltext(label + ' (' + percent + '%)', x, y);
});
ctx.restore();
}
}],
you may also have to define some padding
at the right of the charts to make sure all labels are displayed on the canvas
.
options: {
layout: {
padding: {
right: 110
}
},
please have a look at the runnable code snippet below.
const chart = new chart(document.getelementbyid('mychart'), {
type: 'horizontalbar',
plugins: [{
afterdraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
ctx.textalign = 'left';
ctx.textbaseline = 'middle';
ctx.font = "12px arial";
let sum = chart.config.data.datasets[0].data.reduce((v, s) => v + s, 0);
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales["y-axis-0"];
yaxis.ticks.foreach((v, i) => {
var label = chart.data.labels[i];
var value = chart.data.datasets[0].data[i];
var x = xaxis.getpixelforvalue(value) + 5;
var y = yaxis.getpixelfortick(i);
let percent = (value * 100 / sum).tofixed(2);
ctx.filltext(label + ' (' + percent + '%)', x, y);
});
ctx.restore();
}
}],
data: {
labels: ['traffic source 1', 'traffic source 2', 'traffic source 3', 'traffic source 4'],
datasets: [{
label: 'by dataset',
data: [15, 8, 12, 6],
backgroundcolor: ['red', 'lightblue', 'green', 'orange'],
barpercentage: 1,
categorypercentage: 1
}]
},
options: {
layout: {
padding: {
right: 110
}
},
legend: {
display: false
},
scales: {
yaxes: [{
ticks: {
display: false
},
gridlines: {
drawticks: false
}
}],
xaxes: [{
ticks: {
beginatzero: true
},
gridlines: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="mychart" height="80"></canvas>
Source: stackoverflow.com
Related Query
- Align data label right. Horizontal bar chart Vue JS
- Draw a horizontal bar chart from right to left
- ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Unable to hide x axis for horizontal bar chart vue js
- ChartJS fails to render horizontal bar chart for timeseries data
- Bar Chart cannot read data and label in laravel
- Data label over stacked bar chart
- Chartjs Bar Chart showing old data when hovering
- ChartJS - Draw chart with label by month, data by day
- Horizontal stacked bar chart with chart.js
- Horizontal bar chart in chart.js
- How to set labels align left in Horizontal Bar using chart.js?
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Chart.js bar chart : Grid color and hide label
- Chart JS show multiple data points for the same label
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Chartjs - data format for bar chart with multi-level x-axes
- Creating a horizontal bar chart extension on Chart.js
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Remove the label and show only value in tooltips of a bar chart
- How to draw Horizontal line on Bar Chart Chartjs
- Stacked horizontal bar chart along total count with chart.js
- PrimeNg bar chart how to show a label for the y-axis
- Position Label under the Horizontal Bar
- X-axis multiple colored label for bar chart using chart.js
- Parsing JSON data into Chart.js bar chart
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- 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
More Query from same tag
- Typescript types for chartjs-adapter-date-fns
- I am getting an issue my chart using chart.js is not appering until i tap 3 time on label button
- How to show Nested charts Radar chart within Doughnut Chart?
- Chart.js: Don't stretch axes beyond chart
- How to set global/specific properies when updating line-chart using Chart.js?
- (ng2-charts, angular) Doughnut chart not showing up after AOT? (but filltext is working)
- Modifying values in a radar chart.js based on user input
- Error ReferenceError: CanvasGradient is not defined
- Barchart reducing space between bars
- how to add simple option to chartjs correctly
- Chartjs unexpected visual animation effect when adding data
- Always show doughnut Chart tooltip in Angular 5
- How can I set different colours for each bar in angular-chart.js v1.0.0?
- ChartJS pie chart, "filling" each segment to indicate another dimension
- In ChartJS how do I change the color of a label in the legend?
- How can I display different values on xAxes than on tooltip Chart.js V3
- how to display chart data as html table chartjs
- Chartjs 2.0 - Increase height of x-axis labels
- How can I force my ChartJS canvas legend to stay in a single column?
- Chartjs 3 ToolTip styling is not being picked up
- Chart.js More than 1 charts on same web page
- Chart.js color change of the data points
- Google charts: Error: Row 0 has 1 columns, but must have 2
- Javascript Chart: How to hide the data
- Chart.js - How to set animation speed?
- Inserting and Fetching values from mongodb using nodejs and chartjs
- How to unregister a chart plugin?
- Update only Chart.js without animations and without refreshing the browser
- How to dynamically use chartjs-plugin-annotation with ng2-charts?
- ChartJS display tooltip at maximum/minimum value