How to display chart values on chartJS without mouseover?

Question

How to display chart values on chartJS without mouseover?

Navigation

#1 by (0 votes)

0

var chartData = {
    labels: [<?php echo html_entity_decode($nomes) ?>],
    datasets: [{
        label: 'Desempenho global (Todas limpezas efetuadas em <?php echo $anoAvaliado ?>)',
        data: [<?php foreach($limpezasAnuais as $limpeza){ echo $limpeza.",";} ?>],
        backgroundColor: [<?php foreach ($cores as $cor){echo "\"" . $cor . "\",";} ?>],
        borderWidth: 1
    }]
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    showTooltips: false,
    data: {
        labels: [<?php echo html_entity_decode($nomes) ?>],
        datasets: [{
            label: 'Desempenho global (Todas limpezas efetuadas em <?php echo $anoAvaliado ?>)',
            data: [<?php foreach($limpezasAnuais as $limpeza){ echo $limpeza.",";} ?>],
            backgroundColor: [<?php foreach ($cores as $cor){echo "\"" . $cor . "\",";} ?>],
            borderWidth: 1
        }]
    },
    options: {
        scales: {

            xAxes: [{
                ticks: {
                    beginAtZero: false
                }

            }]

        }
    }
});

chartjs

asked by anonymous 02.10.2018 / 22:24

1 answer

Value passed in the pattern tag keys Logback How to put in hierarchy

score 0 · Accepted Answer

You can user the events that ChartJS offers. For example, for the chart to respond only to click events, you can use:

options: {
        //Este gráfico não responderá ao mousemove, etc
        events: ['click']
}

To make Tooltip always visible in version ChartJs > 2.1.5 you can control through options property. Remember that you need to register the plug-in before initializing the chart.

Font

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));
        });
      });
      chart.options.tooltips.enabled = false;
    }
  },
  afterDraw: function(chart, easing) {
    if (chart.config.options.showAllTooltips) {
      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();
        tooltip.pivot();
        tooltip.transition(easing).draw();
      });
      chart.options.tooltips.enabled = false;
    }
  }
});

Then use

options: {
    showAllTooltips: true
}

Example

var canvas = document.getElementById('myChart');
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));
        });
      });
      chart.options.tooltips.enabled = false;
    }
  },
  afterDraw: function(chart, easing) {
    if (chart.config.options.showAllTooltips) {
      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();
        tooltip.pivot();
        tooltip.transition(easing).draw();
      });
      chart.options.tooltips.enabled = false;
    }
  }
});

var data = {
  labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho"],
  datasets: [{
    label: "Meu dataset",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    data: [65, 59, 20, 81, 56, 55, 40],
  }]
};

var myBarChart = Chart.Bar(canvas, {
  data: data,
  options: {
    showAllTooltips: true,
    tooltips: {
      callbacks: {
        title: function(tooltipItems, data) {
          return '';
        },
        label: function(tooltipItem, data) {
          var datasetLabel = '';
          var label = data.labels[tooltipItem.index];
          return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        }
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>

<canvas id="myChart" height="230" width="680"></canvas>