[Chartjs]-Angular 2 chart โ€“ change point radius

6๐Ÿ‘

โœ…

You can set some of these values in options, then pass them into the canvas directive. Put the [options] tag in the 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>

Then create the options object in the TypeScript:

private chartOptions = 
{ 
    responsive: true, 
    elements: 
    { 
        point: 
        {
            radius: 1,
            hitRadius: 5,
            hoverRadius: 10,
            hoverBorderWidth: 2
        }
    }
};

More on ChartJS point configuration

Leave a comment