chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.34k stars 11.89k forks source link

How to show % and number in js chart Tool Tip? #5475

Closed joydeeproy closed 6 years ago

joydeeproy commented 6 years ago

I am using jschart for showing some data. But in the tool tip I want to add a % sign after the number displayed.

I am doing this in Graph setting/configuration

const projxAxisLabel = 'Evaluation Type';
  const projyAxisLabel = 'Number of Evaluations / Sum of Findings';
  const projyAxisLabel2 = 'Current Compliance %';
  this.projData = data; // getting from service
  this.projLabels = xLabels; // getting from service
  this.projSeries = yLabels; // getting from service
  this.projDataSet = [
    {
      type: 'bar',
      data: projGraphData.data[0],
      yAxisID: 'y-axis-1'
    },
    {
      type: 'bar',
      data: projGraphData.data[1],
      yAxisID: 'y-axis-1'
    },
    {
      type: 'bar',
      data: projGraphData.data[2],
      yAxisID: 'y-axis-2'
     }
  ];
  this.projOptions = {
    scales: {
      yAxes: [
        {
          id: 'y-axis-1',
          type: 'linear',
          categorySpacing: 0,
          display: true,
          maxBarThickness: 0,
          position: 'left',
          ticks: {
            beginAtZero: true
          },
          scaleLabel: {
            display: true,
            labelString: projyAxisLabel
          }
        },
        {
          id: 'y-axis-2',
          type: 'linear',
          display: true,
          position: 'right',
          ticks: {
            min: 0,
            max: 100,
            beginAtZero: true,
            callback: function(value) {
              return `${Number(value)}%`;
            }
          },
          scaleLabel: {
            display: true,
            labelString: projyAxisLabel2
          }
        }
      ],
      xAxes: [
        {
          barThickness: 5,
          categoryPercentage: 0.2,
          ticks: {
            autoSkip: false
          },
          scaleLabel: {
            display: true,
            labelString: projxAxisLabel
          },
          gridLines: {
            display: false
          }
        }
      ]
    },
    elements: {
      line: {
        fill: false
      }
    },
    legend: {
      display: true,
      position: 'bottom',
      labels: {
        boxWidth: 15
      }
    }
  };
}

I want add % sign on tool tip for all Current Compliance % label in different tool tip in the graph. But for other labels value there should not be any % sign. As now all values have no % sign. So I want to add for the last Label value with % sign.

tooltip

Raw Data from response = {

"xLabels": ["Coding and Unit Testing","Developing the Design","Project Closure","Software Package Releases","Baseline Audits","Establishing Change Management","Peer Review","Production Support Documentation", "Project Management - Project Initiation","Project Monitoring and Control","Testing","Requirements Development"],

"data": [[2,2,0,2,1,2,1,3,2,3,2,3],[0,0,0,0,0,0,0,0,0,4,8,9],[0,0,0,0,100,100,100,100,100,100,71,79]],

"yLabels": ["# of Evaluation,","Sum of Findings","Current Compliance %"]

}

etimberg commented 6 years ago

@joydeeproy you'll get a better answer to this question on stack overflow