вертикальная линия response-chartjs-2 при наведении на график - PullRequest
Новая
       36

вертикальная линия response-chartjs-2 при наведении на график

0 голосов
/ 22 марта 2019

Я пытаюсь создать линейную диаграмму с использованием response-chartjs-2, у которой есть вертикальная линия при наведении курсора на точки данных на графике. Как на картинке ниже:

Требования к диаграмме

Я пытался использовать плагин chartjs-plugin-annotation, но со смешанными результатами. Мне удалось создать статическую линию, не понимая, как и почему она работает. Как мне этого добиться? Я на что-то? 

const data = {
    labels: [...week(d)],
    datasets: [
        {
            ...
            data: [10000, 9500, 7000, 4500, 2500, 1500, 500, 0],
        }
    ]
};

var line = [{
    type: "line",
    mode: "vertical",

    // ???
    scaleID: "y-axis-0",
    value: -20000,

    borderColor: "#2984c5",
    borderWidth: 1,
}];

const options = {
    tooltips: {
        xPadding: 20,
        yPadding: 10,
        displayColors: false,
        bodyFontSize: 16,
        bodyFontStyle: 'bold',
    },
    annotation: {
        annotations: line,
    },
    scales: {
        yAxes: [{
            gridLines: {
                drawBorder: false,
                tickMarkLength: 0,
            },
            ticks: {
                fontSize: 14,
                padding: 15,
                max: data.maxY,
                min: 0,
                maxTicksLimit: 6,
                fontColor: "#485465"
            }
        }],
        xAxes: [{
            ticks: {
                padding: 5,
                fontSize: 14,
                fontColor: "#485465",
            },
            gridLines: {
                display: false,
            },
        },

        ],
    },
    responsive: false,
}

У меня есть полный код здесь: https://codesandbox.io/s/y28mk3rn4z

...