Chart.js - how to disable everything on hover

How can I set the code that the diagram will not affect the hang, put parameters, (hover) links, etc.

I am using chart.js. Below is my code where I set the pie chart.

Html ..

<div id="canvas-holder" style="width:90%;">
    <canvas id="chart-area" />
</div>

.. and js ...

$(document).ready(function () {


                var config = {
                    type: 'pie',
                    data: {
                        datasets: [{
                            data: [60,20],
                            backgroundColor: [
                                "#ddd",
                                "#58AC1C"
                            ],

                            label: 'Dataset 1'
                        }],
                        labels: [
                            "Bla1 ",
                            "Bla2 "+
                        ]   
                    },
                    options: {
                        responsive: true
                    }
                };


                window.onload = function() {
                    var ctx = document.getElementById("chart-area").getContext("2d");
                    window.myPie = new Chart(ctx, config);
                };      
            });
+3
source share
3 answers

You can try

 showTooltips: false

You can also use the following link

http://jsfiddle.net/TZq6q/298/

+4
source

to remove all styles / tooltips from vanilla chart.js:

var myChart = new Chart(canvas, {
  options: {
    tooltips: {enabled: false},
    hover: {mode: null},
  }
  ...
})

Chart.js mousemove , . "hover" null, , , :hover.

, , .

. - .

UPDATE: Chart.js "":

var myChart = new Chart(canvas, {
  options: {
    events: []
  }
  ...
})

"" ( [ 'click', 'hover' ..] "" /, .

+38

- , tooltip hover. :

$(function () {

    Highcharts.chart('container', {
        plotOptions: {
        	series: {
            states: {
                      hover: {
                          enabled: false
                      }
                  }
          }
        },

        tooltip: {
            enabled: false
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});
#reporting {
    position: absolute; 
    top: 55px; 
    right: 20px; 
    font: 12px Arial, Verdana; 
    color: #666;
    background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px; min-width: 300px"></div>
<div id="reporting"></div>
Hide result

(, Highcharts).

Hope this helps :)

-5
source

Source: https://habr.com/ru/post/1671769/


All Articles