Блог

У меня есть chart.js линейный график:

 var myLineChart = new Chart(ctx, {
                type: 'line',
                data: lineChartData,
                options: {
                    tooltips: {
                        titleSpacing: 5,
                    },
                    responsive: true,
                    legend: {
                        display: false,
                    },
                    scales: {
                        yAxes: [
                            {
                                gridLines: {
                                    color: '#354657',
                                },
                                ticks: {
                                    fontColor: '#fff',
                                    stepSize: 5,
                                },
                            },
                        ],
                        xAxes: [
                            {
                                gridLines: {
                                    color: '#354657',
                                },
                                ticks: {
                                    fontColor: '#fff',
                                },
                            },
                        ],
                    },
                },]
  

Проблема в том, что он отображает всплывающие подсказки с перекрывающимся текстом, как показано:

Это должно показывать текущее значение, 41.9. Но они перекрываются. Я попытался изменить пространство заголовков, но это ничего не дало. Как я могу это исправить?

Что я лично делаю для всех своих пользовательских диаграмм, так это создаю пользовательский заголовок / метку, независимую от того, что я передаю в качестве параметров для диаграммы. Мне нравится иметь контроль над HTML / чем угодно, что выводится на ярлык. Вы можете сделать это с помощью клавиши обратного вызова

   tooltips: {
    enabled: true,
    position: "nearest",
    caretSize: 20,
    mode: "index",
    intersect: false,
    titleFontSize: 16,
    titleFontColor: "white",
    backgroundColor: COLORS.DARK,
    callbacks: {
      title: (tooltipItem, _) => {
        return formatDate("LT", tooltipItem[0].xLabel);
      },
      label: (tooltipItem, _) => {
        const { yLabel } = tooltipItem;
        return `${yLabel} Sessions Recorded`;
      }
    }
  },