Angular - ng2-Charts - Heading on x-axis

Asked

Viewed 130 times

0

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?

inserir a descrição da imagem aqui

1 answer

0

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
                        }
                    }]
                }
            }
        });

Browser other questions tagged

You are not signed in. Login or sign up in order to post.