Position

This sample shows how to use the tooltip position mode setting.

Position - 图1

Position: averagePosition: nearestPosition: bottom (custom)

config positioner setup actions

  1. const config = {
  2.   type: 'line',
  3.   data: data,
  4.   options: {
  5.     interaction: {
  6.       intersect: false,
  7.       mode: 'index',
  8.     },
  9.     plugins: {
  10.       title: {
  11.         display: true,
  12.         text: (ctx) => 'Tooltip position mode: ' + ctx.chart.options.plugins.tooltip.position,
  13.       },
  14.     }
  15.   }
  16. };
  1. // Create a custom tooltip positioner to put at the bottom of the chart area
  2. components.Tooltip.positioners.bottom = function(items) {
  3.   const pos = components.Tooltip.positioners.average(items);
  5.   // Happens when nothing is found
  6.   if (pos === false) {
  7.     return false;
  8.   }
  10.   const chart = this.chart;
  12.   return {
  13.     x: pos.x,
  14.     y: chart.chartArea.bottom,
  15.     xAlign: 'center',
  16.     yAlign: 'bottom',
  17.   };
  18. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
  3. const data = {
  4.   labels: Utils.months({count: DATA_COUNT}),
  5.   datasets: [
  6.     {
  7.       label: 'Dataset 1',
  8.       data: Utils.numbers(NUMBER_CFG),
  9.       fill: false,
  10.       borderColor: Utils.CHART_COLORS.red,
  11.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  12.     },
  13.     {
  14.       label: 'Dataset 2',
  15.       data: Utils.numbers(NUMBER_CFG),
  16.       fill: false,
  17.       borderColor: Utils.CHART_COLORS.blue,
  18.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  19.     },
  20.   ]
  21. };
  1. const actions = [
  2.   {
  3.     name: 'Position: average',
  4.     handler(chart) {
  5.       chart.options.plugins.tooltip.position = 'average';
  6.       chart.update();
  7.     }
  8.   },
  9.   {
  10.     name: 'Position: nearest',
  11.     handler(chart) {
  12.       chart.options.plugins.tooltip.position = 'nearest';
  13.       chart.update();
  14.     }
  15.   },
  16.   {
  17.     name: 'Position: bottom (custom)',
  18.     handler(chart) {
  19.       chart.options.plugins.tooltip.position = 'bottom';
  20.       chart.update();
  21.     }
  22.   },
  23. ];

Docs