Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js - Writing Labels Inside of Horizontal Bars?

In Chart.js, is there any way to write the labels inside of the horizontal bars in a "horizontalBar" chart? As in something like:

this graph

Is anything similar to this possible in Chart.js?

Thanks!

like image 479
antonin_scalia Avatar asked Jul 28 '16 20:07

antonin_scalia


People also ask

How do you put labels inside a bar chart?

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.

Can a bar chart be displayed horizontally?

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.

What is a stacked bar graph?

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.

How do you make a bar graph on Chartjs?

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.


1 Answers

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

like image 90
Elie Avatar answered Sep 20 '22 16:09

Elie