Question

4

How to customize the tooltip of a Chart.js Line Chart?

rated 0 times [ 6] [ 2] / answers: 1 / hits: 6167 / 3 Years ago, mon, december 21, 2020, 12:00:00

I'm trying to show some data using a Line chart from Chart.js

My current chart looks like this:

My desired output should be displayed as follows:

My code for the first chart is the following:

var chart = new Chart(ctx, {

  type: "line",

  data: {

    labels: This.xAxis,

    datasets: [{

      backgroundColor: gradient,

      pointBackgroundColor: "white",

      borderWidth: 1,

      borderColor: "#5946B0",

      pointRadius: 2,

      displayColors: false,

      data: This.yAxis

    }]

  },

  options: {

    title: {

      display: false,

      text: "Test"

    },

    tooltips: {

      backgroundColor: "#FAFAFA",

      borderColor: "lightgreen",

      borderWidth: 1,

      titleFontColor: "black",

      titleFontStyle: "normal",

      displayColors: false,

      bodyFontColor: "black"

    },

    legend: {

      display: false

    },

    plugins: {

      zoom: {

        pan: {

          enabled: true,

          mode: "x",

          speed: 10,

          threshold: 10

        },

        zoom: {

          enabled: true,

          mode: "y"

        }

      }

    }

  }

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deiong

Add To Favorites

Follow

Total Points: 15

Total Questions: 103

Total Answers: 99

Location: Sudan

Member since Thu, May 7, 2020

4 Years ago

deiong questions

1 How to allow CORS in node.js?

Mon, Nov 22, 21, 00:00, 3 Years ago

1 TypeError: Cannot read properties of undefined (reading 'cache')

Sun, Sep 26, 21, 00:00, 3 Years ago

1 check value of parameters in URL with Cypress

Tue, Jun 15, 21, 00:00, 3 Years ago

1 firebase storage: storage.ref is not a function

Thu, Oct 15, 20, 00:00, 4 Years ago

1 How can I wait for the loop to Complete?

Tue, Jul 21, 20, 00:00, 4 Years ago

View All

answered 4 Years ago caylasarinag · Accepted Answer

You can define callback functions for the title and content of the tooltips using options.tooltips.callbacks.

const options = {

  type: 'line',

  options: {

    tooltips: {

      callbacks: {

        title: function(t, d) {

          return moment(d.labels[t[0].index]).format('dd MMM DD, YYYY');

        },

        label: function(t, d) {

          const label = d.datasets[t.datasetIndex].label;

          const value = d.datasets[t.datasetIndex].data[t.index];

          const sign = value >= 0 ? '+' : '';

          return `${label}: ${sign}${value.toFixed(2)}%`;

        }

      }

    }

  }

};

Demo

const dateRange = n =>

  (now =>

    new Array(n).fill(0).map((value, index) =>

      new Date(now + (8.64e7 * index))))

  (Date.now());



const palette = [{

  hex: '#5946B0',

  rgba: 'rgba(89, 70, 176, 0.33)'

}, {

  hex: '#eab925',

  rgba: 'rgba(234, 185, 37, 0.33)'

}];



const randRange = n =>

  new Array(n).fill(0).map(() =>

    chance.floating({ min: -100, max: 300 }))



const options = {

  type: 'line',

  data: {

    labels: dateRange(7),

    datasets: [{

      label: 'Investment',

      data: randRange(7),

      borderColor: palette[0].hex,

      backgroundColor: palette[0].rgba,

      pointBackgroundColor: 'white',

      borderWidth: 1

    }, {

      label: 'Return',

      data: randRange(7),

      borderColor: palette[1].hex,

      backgroundColor: palette[1].rgba,

      pointBackgroundColor: 'white',

      borderWidth: 1

    }]

  },

  options: {

    scales: {

      xAxes: [{

        type: 'time',

        time: {

          unit: 'day'

        }

      }],

      yAxes: [{

        ticks: {

          reverse: false

        }

      }]

    },

    tooltips: {

      // See: https://stackoverflow.com/a/44010778/1762224

      callbacks: {

        title: function(t, d) {

          return moment(d.labels[t[0].index]).format('dd MMM DD, YYYY');

        },

        label: function(t, d) {

          const label = d.datasets[t.datasetIndex].label;

          const value = d.datasets[t.datasetIndex].data[t.index];

          const sign = value >= 0 ? '+' : '';

          return `${label}: ${sign}${value.toFixed(2)}%`;

        }

      },

      backgroundColor: #FAFAFA,

      borderColor: lightgreen,

      borderWidth: 1,

      titleFontColor: black,

      titleFontStyle: bold,

      displayColors: false,

      bodyFontColor: black

    }

  }

};



const ctx = document.getElementById('chart').getContext('2d');

new Chart(ctx, options);

<script src=https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.18/chance.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script>

<link href=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css rel=stylesheet />

<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js></script>

<canvas id=chart height=120></canvas>

If you need to render a completely customized tooltip with CSS, you may need to define a options.tooltips.custom renderer function, but it may prove to be more difficult.