[Chartjs]-Chart JS Crosshair – Linked Charts without linked Legends

by

0👍

You can extend the chart and write your own type with horizontal and vertical arbitrary lines as it is shown in this answer.

Here is an update if you need it for version 2

HTML

<canvas id="chart" width="600" height="400"></canvas>

SCRIPT

var ctx = document.getElementById('chart').getContext('2d');

Chart.defaults.crosshair = Chart.defaults.line;
Chart.controllers.crosshair = Chart.controllers.line.extend({
    draw: function (params) {
        Chart.controllers.line.prototype.draw.call(this, params);
        
        if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
                var activePoint = this.chart.tooltip._active[0],
                 ctx = this.chart.ctx,
                 x = activePoint.tooltipPosition().x,
                 y = activePoint.tooltipPosition().y,
                 topY    = this.chart.scales['y-axis-0'].top,
                 bottomY = this.chart.scales['y-axis-0'].bottom,
                 startX  = this.chart.scales['x-axis-0'].left,
                 endX    = this.chart.scales['x-axis-0'].right;

               // draw line
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(x, topY);
                ctx.lineTo(x, bottomY);
                ctx.moveTo(startX, y);
                ctx.lineTo(endX, y);
                ctx.lineWidth = 2.5;
                ctx.strokeStyle = 'rgb(55, 55, 55)';
                ctx.stroke();
                ctx.restore();
            }
    }
});

var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'crosshair',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgba(255, 255, 255,0)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

    // Configuration options go here
    options: {}
});

Result
enter image description here

var ctx = document.getElementById('chart').getContext('2d');

Chart.defaults.crosshair = Chart.defaults.line;
Chart.controllers.crosshair = Chart.controllers.line.extend({
    draw: function (params) {
        Chart.controllers.line.prototype.draw.call(this, params);
        
        if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
                var activePoint = this.chart.tooltip._active[0],
                 ctx = this.chart.ctx,
                 x = activePoint.tooltipPosition().x,
                 y = activePoint.tooltipPosition().y,
                 topY    = this.chart.scales['y-axis-0'].top,
                 bottomY = this.chart.scales['y-axis-0'].bottom,
                 startX  = this.chart.scales['x-axis-0'].left,
                 endX    = this.chart.scales['x-axis-0'].right;

               // draw line
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(x, topY);
                ctx.lineTo(x, bottomY);
                ctx.moveTo(startX, y);
                ctx.lineTo(endX, y);
                ctx.lineWidth = 2.5;
                ctx.strokeStyle = 'rgb(55, 55, 55)';
                ctx.stroke();
                ctx.restore();
            }
    }
});

var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'crosshair',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgba(255, 255, 255,0)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

    // Configuration options go here
    options: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<canvas id="chart" width="600" height="400"></canvas>

Leave a comment