Создать свой график на ChartJs

Question

Необходимо реализовать вот такой график

При клике по точке на основной линии, необходимо, чтобы рисовалась вертикальная линия к значению на оси Х, а само значение изменяло свой цвет и было нарисовано на круге. Нарисовать вертикальную линию, при клике, у меня получилось. Сделать разноцветной основную линию графика я тоже придумал как (в коде этого нет). А вот с изменением цвета значения на оси - проблема.

const line = {
  type: "line",
  data: {
    labels: ["1", "2", "3", "4", "5", "6"],
    datasets: [{
      label: "test",
      data: [1, 2, 5, 2, 7, 10],
      borderColor: "red",
      fill: false,
    }, ],
  },
  options: {
    tooltips: {
      enabled: false,
    },
    onClick: function(event, data) {
      const baseData = data[0];
      if (!baseData) return;
      const ctx = baseData._chart.ctx;
      const {
        _model,
        _xScale
      } = baseData;
      this.drawArray = function(ctx) {
        // ctx.strokeStyle = 're',
        ctx.lineWidth = 2;
        ctx.moveTo(_model.x, _model.y);
        ctx.lineTo(_model.x, ctx.canvas.height - _xScale.height);
        ctx.stroke();
      };
      this.drawArray(ctx);
    },
    onHover: function(event, data) {
      if (!this.drawArray) return;
      this.drawArray(this.ctx);
    },
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{}],
      yAxes: [{}],
    },
  },
};
const testChart = Chart.controllers.line.extend({
  draw: function(ease) {
    Chart.controllers.line.prototype.draw.call(this, ease);
    if (!this.chart.drawArray) return;
    this.chart.drawArray(this.chart.ctx);
  },
});
Chart.controllers.testChart = testChart;

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const chart = new Chart(ctx, {
  type: "testChart",
  data: line.data,
  options: line.options,
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas></canvas>

Пробовал реализовать свою ось, как написано в документации, но решительно ничего не получается https://www.chartjs.org/docs/latest/developers/axes.html Нужна помощь клуба)

БЛОГ НА HUSL

Создать свой график на ChartJs

Ответы (0 шт):