ng2-chart.js tooltip always showing

Question

How to set tooltip using ng2-chart always visible? At char.js is option showTooltips: true, but I can't find ng2-chart solution.

Answer 1

You can pass an options object into the canvas directive.

In your html:

<div style="display: block;">
    <canvas baseChart width="2" height="1"
            [datasets]="chartData"
            [labels]="chartLabels"
            [options]="chartOptions"
            [colors]="chartColors"
            [legend]=true
            chartType=line></canvas>
</div>

In your typescript, create the chartOptions:

private chartOptions = { responsive: true, tooltips: { mode: 'index', intersect: false } };

Set the intersect: false option to have the tooltip always displayed on hover, like you wanted.

More on ChartJS tooltips