error when trying to display the data of a graph with chart js

0

I have a graphic created with the library chartjs .

When I select some label label First , Second the tooltips of the tag crossed out remain persuasive floating on the graph.

my questions are:

  

Is there any way to solve this?

     

Is there a way to delete the tooltips to integrate them again?

This is my code that I implemented.

var ctx = document.getElementById("chart1");
var cfg = {   
    type: 'bar',
    data:{ 
        labels: ['a', 'b', 'c'], 
        datasets:[{
            label: 'primero',
            backgroundColor: 'rgb(15,51,67)',
            borderColor: 'rgba(28,30,67,.5)',
            borderWidth: 1,
            data: [100,80,30]
            }, {
            label: 'segundo',
            backgroundColor: 'rgb(12,25,132)',
            borderColor: 'rgba(79,178,132,.5)',
            borderWidth: 1,
            data: [20,45,30]
        }]

    },
    options: {
        "hover": {
        "animationDuration": 0
        },
       "animation": {
            "duration": 1,
            "onComplete": function () {
                var chartInstance = this.chart,
        ctx = chartInstance.ctx;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

                this.data.datasets.forEach(function (dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function (bar, index) {
            var data = dataset.data[index]+"%";   

            ctx.fillText(data, bar._model.x, bar._model.y - 5);
                        });
           });
        }
        },
        legend: {
            "display": true
        },
        tooltips: {
            "enabled": false
         },
        scales: {

            yAxes: [{
                    display: true,
                    gridLines: {
                    display : true
                },
                ticks: {
                        display: true,
                    beginAtZero:true
                }
            }],
            xAxes: [{
                    gridLines: {
                    display : false
                },
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    },

};
 var chart = new Chart(ctx, cfg);
    
asked by am_c 25.07.2018 в 22:15
source

0 answers