[Chartjs]-Unwanted comma in the tooltips when line breaking a label in ChartsJS

by

2👍

✅

Simply also define a tooltips.callbacks.title function as follows and it will work. Sounds weird since the function does nothing but returning the label.

tooltips: {
  callbacks: {        
    title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
    ... 
  }
},

Please have a look at the runnable code snippet below.

new Chart(document.getElementById("chart"), {
  type: "bar",
  data: {
    labels: [
      ['Utensilios para', 'escrita e artes'],
      ['Materiais não estruturado', 'de largo alcançe/recicláveis'],
      ['Repertório artístico-cultural e', 'científico de diferentes', 'origens étnico-raciais']
    ],
    datasets: [{
      label: "A",
      data: [5, 8, 4],
      fill: false,
      backgroundColor: "rgba(255, 99, 132, 0.2)",
      borderColor: "rgb(255, 99, 132)",
      borderWidth: 1
    },
    {
      label: "B",
      data: [3, 5, 4],
      fill: false,
      backgroundColor: "rgba(255, 159, 64, 0.2)",
      borderColor: "rgb(255, 159, 64)",
      borderWidth: 1
    },
    {
      label: "C",
      data: [6, 5, 7],
      fill: false,
      backgroundColor: "rgba(255, 205, 86, 0.2)",
      borderColor: "rgb(255, 205, 86)",
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      callbacks: {        
        title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
        label: (tooltipItems, data) =>
          data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.value + '%'
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="100"></canvas>

Leave a comment