ChartJS 图表和数据标签:自动Y轴(和动态数据)隐藏数据标签

wz8daaqr  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(265)

我有一个带有标签(数据标签)的图表(chartjs)。当我的数据更改时,图表会自动更新。但是,最大的数据标签大多数时候会被Y轴的自动调整大小所隐藏。您有什么办法可以解决这个问题吗?

上面应该是一个3:)
下面是我的代码:

  1. const completionOptions = {
  2. responsive: true,
  3. plugins: {
  4. legend: {
  5. display: false,
  6. },
  7. tooltip: {
  8. backgroundColor: 'rgb(85, 85, 85, 1)',
  9. displayColors: false,
  10. // https://www.chartjs.org/docs/latest/configuration/tooltip.html
  11. },
  12. datalabels: {
  13. color: 'rgb(203, 203, 203)',
  14. anchor: 'end',
  15. align: 'end',
  16. labels: {
  17. title: {
  18. font: {
  19. family: 'karla',
  20. weight: '600',
  21. size: 12,
  22. },
  23. }
  24. }
  25. }
  26. },
  27. scales: {
  28. display: false,
  29. y: {
  30. beginAtZero: true,
  31. display: false,
  32. grid: {
  33. display: false,
  34. },
  35. ticks: {
  36. padding: 10
  37. }
  38. },
  39. x: {
  40. grid: {
  41. display: false,
  42. },
  43. ticks: {
  44. autoSkip: false,
  45. maxRotation: 0,
  46. minRotation: 0,
  47. font: {
  48. size: 20,
  49. }
  50. }
  51. },
  52. }
  53. }
zujrkrfu

zujrkrfu1#

可以使用grace选项向y轴添加额外空间:
第一个

相关问题