Scattered plot in ng2-charts

Question

I have gone through the documentation of ng2-charts ( https://valor-software.com/ng2-charts/ ) but I couldn't find Scattered Plot in documentation. Is any other way to achieve Scattered plot chart in ng2-charts ? Any tricks or customization available? Help me out.

Answer 1

You could use a line chart in ng2-charts and set the color property as follows:

<canvas baseChart
   [colors]="chartColors"
   ...>
</canvas>

If you define chartColors like this:

public chartColors = [{
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    pointBackgroundColor: '#ff0000',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: '#ff0000'
  }];

You will get a transparent background (fill area under the chart) and a transparent line (the points will still be visible - making it appear as a scatter graph). The resulting graph should look something like this:

Please see this StackBlitz for a demo.