In Chart.js, is there any way to write the labels inside of the horizontal bars in a "horizontalBar"
chart? As in something like:
Is anything similar to this possible in Chart.js?
Thanks!
Click the chart, and then click the Chart Design tab. Click Add Chart Element and select Data Labels, and then select a location for the data label option. Note: The options will differ depending on your chart type. If you want to show your data label inside a text bubble shape, click Data Callout.
Horizontal bar graphs represent the data horizontally. It is a graph whose bars are drawn horizontally. The data categories are shown on the vertical axis and the data values are shown on the horizontal axis.
A stacked bar chart is a type of bar graph that represents the proportional contribution of individual data points in comparison to a total. The height or length of each bar represents how much each group contributes to the total.
Bar chart Bar charts are created by setting type to bar (to flip the direction of the bars, set type to horizontalBar ). The colors of the bars are set by passing one color to backgroundColor (all bars will have the same color), or an array of colors.
There is now on option "mirror" to make the label appear inside the bar.
Example of "options" config for a horizontalBar chart :
options: {
scales: {
yAxes: [{ticks: {mirror: true}}]
}
}
Doc : http://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With