Angular - ng2-Charts - Heading on x-axis

Question

I am using (ng2-Charts) to implement a bar chart, and at the moment, I am trying to include a title with the percentage on the x-axis (as in the image below) and I am encountering difficulties. Could someone help me? Is it possible?

Answer 1

ng2-Charts uses Chart.js. You find many examples here.

Now there is doubt about what exactly you want to show on the x-axis. If it is the measured value, you can use that plugin. In the sample page have one that might look like what you want.

After installing the plugin, just create the chart with the label option:

var chart = new Chart('chart-0', {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    backgroundColor: Samples.color(0),
                    data: Samples.numbers({
                        count: DATA_COUNT,
                        min: 0,
                        max: 100
                    })
                }]
            },
            options: {
                plugins: {
                    datalabels: {
                        align: 'end',
                        anchor: 'end',
                        font: function(context) {
                            var w = context.chart.width;
                            return {
                                size: w < 512 ? 12 : 14
                            }
                        },
                        formatter: function(value, context) {
                            return context.chart.data.labels[context.dataIndex];
                        }
                    }
                },
                scales: {
                    xAxes: [{
                        display: false,
                        offset: true
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });