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. ];