Search code examples
javascriptchart.jsreact-chartjs

How to change font weight of footer in tooltips in Chart JS


I am trying to change the font weight of footer in tooltips in Chart JS. According to this link (https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration), footerFont seems to be the one to control this but I could not quite get it to work

My code:

options: {
        tooltips:{
            footerFont: {weight: 'normal'},
          callbacks: {
            footer: function(tooltipItem, data) {
              return 'some text'
            }
          }
        },    
    }

Fiddle: https://jsfiddle.net/dqdqdq/yp47oL9t/10/ . The footer is still bold when we hover any bubbles.


Solution

  • You are looking at the documentation of chart.js version 3 which has some major changes from version 2, if you take the version 2 docs: https://www.chartjs.org/docs/2.7.1/configuration/tooltip.html you can see that the property is called a bit different and also just accepts a string

    Working sample:

    var ctx = document.getElementById('myChart').getContext('2d');
    
    var myChart = new Chart(ctx, {
    
      type: 'bubble',
    
      data: {
        datasets: [{
            label: 'Top',
            data: [{
              x: 110,
              y: 0,
              r: 10,
              name: "Performance"
            }],
            backgroundColor: "rgba(153,255,51,0.6)"
          },
          {
            label: 'Average',
            data: [{
              x: 75,
              y: 0,
              r: 10,
              name: "Performance"
            }],
            backgroundColor: "rgba(153,155,51,0.6)"
          },
        ]
      },
      pointDot: true,
      options: {
        tooltips: {
          footerFontStyle: 'normal',
          callbacks: {
            footer: function(tooltipItem, data) {
              return 'some text'
            }
          }
        },
      }
    
    });
    <canvas id="myChart"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>