Interaction Modes

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

Interaction Modes - 图1

Mode: indexMode: datasetMode: pointMode: nearest, axis: xyMode: nearest, axis: xMode: nearest, axis: yMode: xMode: yToggle Intersect

config 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) => {
  13.           const {axis = 'xy', intersect, mode} = ctx.chart.options.interaction;
  14.           return 'Mode: ' + mode + ', axis: ' + axis + ', intersect: ' + intersect;
  15.         }
  16.       },
  17.     }
  18.   }
  19. };
  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: 'Mode: index',
  4.     handler(chart) {
  5.       chart.options.interaction.axis = 'xy';
  6.       chart.options.interaction.mode = 'index';
  7.       chart.update();
  8.     }
  9.   },
  10.   {
  11.     name: 'Mode: dataset',
  12.     handler(chart) {
  13.       chart.options.interaction.axis = 'xy';
  14.       chart.options.interaction.mode = 'dataset';
  15.       chart.update();
  16.     }
  17.   },
  18.   {
  19.     name: 'Mode: point',
  20.     handler(chart) {
  21.       chart.options.interaction.axis = 'xy';
  22.       chart.options.interaction.mode = 'point';
  23.       chart.update();
  24.     }
  25.   },
  26.   {
  27.     name: 'Mode: nearest, axis: xy',
  28.     handler(chart) {
  29.       chart.options.interaction.axis = 'xy';
  30.       chart.options.interaction.mode = 'nearest';
  31.       chart.update();
  32.     }
  33.   },
  34.   {
  35.     name: 'Mode: nearest, axis: x',
  36.     handler(chart) {
  37.       chart.options.interaction.axis = 'x';
  38.       chart.options.interaction.mode = 'nearest';
  39.       chart.update();
  40.     }
  41.   },
  42.   {
  43.     name: 'Mode: nearest, axis: y',
  44.     handler(chart) {
  45.       chart.options.interaction.axis = 'y';
  46.       chart.options.interaction.mode = 'nearest';
  47.       chart.update();
  48.     }
  49.   },
  50.   {
  51.     name: 'Mode: x',
  52.     handler(chart) {
  53.       chart.options.interaction.mode = 'x';
  54.       chart.update();
  55.     }
  56.   },
  57.   {
  58.     name: 'Mode: y',
  59.     handler(chart) {
  60.       chart.options.interaction.mode = 'y';
  61.       chart.update();
  62.     }
  63.   },
  64.   {
  65.     name: 'Toggle Intersect',
  66.     handler(chart) {
  67.       chart.options.interaction.intersect = !chart.options.interaction.intersect;
  68.       chart.update();
  69.     }
  70.   },
  71. ];

Docs