0

Na imagem segue Gráfico em Linha que tenho. inserir a descrição da imagem aqui

Gostaría que o tooltip saísse conforme exemplo abaixo:

80%

Ao invés da forma como está:

03
: 80

Código Gráfico:

$(function () {
    new Chart(document.getElementById("graficoOcupacao").getContext("2d"), getChartJs('line'));
});

function getChartJs(type) {

    var config = null;

    if (type === 'line') {
        config = {
            type: 'line',
            data: {
                labels: ["01", "02", "03", "04", "05", "06", "07","08","09","10","11", "12", "13", "14", "15", "16", "17","18","19","20","21", "22", "23", "24", "25", "26", "27","28","29","30"],
                datasets: [{
                    data: dadosGraficoValores,
                    borderColor: 'rgba(0, 188, 212, 0.75)',
                    backgroundColor: 'rgba(0, 188, 212, 0.3)',
                    pointBorderColor: 'rgba(0, 188, 212, 0)',
                    pointBackgroundColor: 'rgba(0, 188, 212, 0.9)',
                    pointBorderWidth: 1
                }]
            },
            options: {
                responsive: true,
                legend: false,
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Dia'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Ocupação (%)'
                        }
                    }]
                },
                title:{
                    display: true,
                    text:'NOVEMBRO/2017'
                }
            }
        }
    }
    return config;
}
5
  • Ele está exibindo assim porque '03' é o label, e 80 está sem 'suffix', coloque o trecho do código que usas para gerar esse gráfico na pergunta, caso contrário fica dificil achar onde corrigir. 30/11/2017 às 19:48
  • Segue editado com o código. 1/12/2017 às 18:34
  • você poderia usar o highcharts.com tem bem mais documentação 1/12/2017 às 18:53
  • Pois é, problema que já montei todo o gráfico certinho aqui, não estava afim de mudar. 1/12/2017 às 18:58
  • Consegui. Vou editar a resposta 4/12/2017 às 12:34

1 Resposta 1

0

Colocar este código dentro de "options" e irá funcionar.

           tooltips: {
                callbacks: {
                    title: function() {
                        return '';
                    },
                    label: function(tooltipItem, data) {
                        return tooltipItem.yLabel + " %";
                    }
                }
            }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .