Interaction Modes

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

Interaction Modes - 图1

Mode: index Mode: dataset Mode: point Mode: nearest Mode: x Mode: y Toggle 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 {intersect, mode} = ctx.chart.options.interaction;
  14. return 'Mode: ' + mode + ', 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',
  28. handler(chart) {
  29. chart.options.interaction.axis = 'xy';
  30. chart.options.interaction.mode = 'nearest';
  31. chart.update();
  32. }
  33. },
  34. {
  35. name: 'Mode: x',
  36. handler(chart) {
  37. chart.options.interaction.mode = 'x';
  38. chart.update();
  39. }
  40. },
  41. {
  42. name: 'Mode: y',
  43. handler(chart) {
  44. chart.options.interaction.mode = 'y';
  45. chart.update();
  46. }
  47. },
  48. {
  49. name: 'Toggle Intersect',
  50. handler(chart) {
  51. chart.options.interaction.intersect = !chart.options.interaction.intersect;
  52. chart.update();
  53. }
  54. },
  55. ];