React-chartjs-2: Show values on bar chart without tooltip

[flyingpath]

Hello:

We can hover the bar to see the detail value of the bar.
Is there any way to show the value above bar by default?

Thanks a lot !!

[AdeelK93]

do you mean something like this? http://jsfiddle.net/5gyfykka/14/

[flyingpath]

Yes! Any simple way to do that on react chartjs?
Or can only use it on charjs ?

[jerairrest]

Hey @flyingpath,

Full credit goes to @lschneiderman who came up with the solution in the Chartjs repo. https://github.com/chartjs/Chart.js/issues/1861

Simply use the following options:

const options = {
    showAllTooltips: true
};

and put the following in your componentWillMount

componentWillMount() {
            Chart.pluginService.register({
                beforeRender: function (chart) {
                    if (chart.config.options.showAllTooltips) {
                        chart.pluginTooltips = [];
                        chart.config.data.datasets.forEach(function (dataset, i) {
                            chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                                chart.pluginTooltips.push(new Chart.Tooltip({
                                    _chart: chart.chart,
                                    _chartInstance: chart,
                                    _data: chart.data,
                                    _options: chart.options.tooltips,
                                    _active: [sector]
                                }, chart));
                            });
                        });
                        // turn off normal tooltips
                        chart.options.tooltips.enabled = false;
                    }
                }, afterDraw: function (chart, easing) {
                    if (chart.config.options.showAllTooltips) {
                        // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
                        if (!chart.allTooltipsOnce) {
                            if (easing !== 1) return;
                            chart.allTooltipsOnce = true;
                        }
                        chart.options.tooltips.enabled = true;
                        Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
                            tooltip.initialize();
                            tooltip.update(); // we don't actually need this since we are not animating tooltips
                            tooltip.pivot();
                            tooltip.transition(easing).draw();
                        });
                        chart.options.tooltips.enabled = false;
                    }
                }
            });
        }

I just verified its working with this code. Let me know if you have anymore troubles!

Jer

[aaayumi]

It didn't work for me.

I got the following error.

`
TypeError: Cannot read property 'register' of undefined
Categories.componentWillMount
src/categories.js:1593
1590 | }
1591 |
1592 | componentWillMount() {

1593 | Chart.pluginService.register({
1594 | beforeRender: function (chart) {
1595 | if (chart.config.options.showAllTooltips) {
1596 | chart.pluginTooltips = [];
`

[dbrodie122]

@aaayumi I got the same error. Check out my comment in #201 , managed to get things working.