Point Style

This sample shows how to use the dataset point style in the tooltip instead of a rectangle to identify each dataset.

Point Style - 图1

Toggle Tooltip Point Style

config setup actions

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. interaction: {
  6. mode: 'index',
  7. },
  8. plugins: {
  9. title: {
  10. display: true,
  11. text: (ctx) => 'Tooltip point style: ' + ctx.chart.options.plugins.tooltip.usePointStyle,
  12. },
  13. tooltip: {
  14. usePointStyle: true,
  15. }
  16. }
  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: 'Triangles',
  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. pointStyle: 'triangle',
  13. pointRadius: 6,
  14. },
  15. {
  16. label: 'Circles',
  17. data: Utils.numbers(NUMBER_CFG),
  18. fill: false,
  19. borderColor: Utils.CHART_COLORS.blue,
  20. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  21. pointStyle: 'circle',
  22. pointRadius: 6,
  23. },
  24. {
  25. label: 'Stars',
  26. data: Utils.numbers(NUMBER_CFG),
  27. fill: false,
  28. borderColor: Utils.CHART_COLORS.green,
  29. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.green, 0.5),
  30. pointStyle: 'star',
  31. pointRadius: 6,
  32. }
  33. ]
  34. };
  1. const actions = [
  2. {
  3. name: 'Toggle Tooltip Point Style',
  4. handler(chart) {
  5. chart.options.plugins.tooltip.usePointStyle = !chart.options.plugins.tooltip.usePointStyle;
  6. chart.update();
  7. }
  8. },
  9. ];

Docs