[Chartjs]-Plot a point on top on line chart in chartjs

by

0👍

As of now best solution I can get is to use mix line graph with bubble graph by adding dataset like this

new Chart(document.getElementById("total-chart"), {
    type: 'line',
    data: {
        labels: [ {!! $dates_string !!} ],
        datasets: [
            {
                data: [ {!! $totals_string !!} ],
                label: 'Totals',
                // steppedLine: true,
                borderColor: "#3e95cd",
                labels: [ {!! $dates_string !!} ],
                pointRadius: 1,
                fill: false
            },
            {
                data: [ {
                    x: '2018-01-18',
                    y: 24500,
                    r: 5
                } ],
                label: ['Diff'],
                // steppedLine: true,
                backgroundColor: "#cd2026",
                type: 'bubble'
            }
        ]
    },
    options: {
        title: {
            display: true,
            text: 'Total'
        },
        tooltips: {
            intersect: false,
            mode: 'index'
        },
        animation: {
            duration: 0
        }
    }
);

result looks somewhat like this.

However label for bubble is funny since I have non numerical x axis. it shows only why mouse is hovered right on x -axis . rest all works as expected

enter image description here

Leave a comment