Angular 2 chart - change point radius

Question

I'm using ng2-charts (https://github.com/valor-software/ng2-charts) to create a linechart for my Angular 2 application. The chart works fine - when you hover over a point, the point automatically changes to white to illustrate that it is being hovered by the mouse. I would like to mimic this behavior but manually through code.

When you click,hover over a point, I have click events that return an object containing the chart (see image). From that object I've managed to find some values that seem to control the radius of the point: _model.hitRadius, _model.radius, _view.hitRadius, and _view.radius (see image).

I've tried changing those values in code but nothing happens to the chart point.

    e.active[0]._model.hitRadius = 5;
    e.active[0]._model.radius = 10;
    e.active[0]._view.hitRadius = 5;
    e.active[0]._view.radius = 10;

I've also tried adding 'e.update()' after changing the values, but I get an error saying that update() is not a function.

score 6 · Accepted Answer · answered May 31 '17 at 15:00

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
        }
    }
};

Angular 2 chart - change point radius

1 Answers1