Chart js bubble chart number inside bubble

I am using ng2-charts to get a bubble chart with this type mentioned in the picture. I have installed chart-js plugins also but I am not capable of getting the numbers inside the bubbles.

Expectation : Inside Bubble I want to write number such as 1, 2, 3 like that

Here is my html ionic code

<div style="display: block">
   <canvas baseChart 
        [datasets]="bubbleChartData"
        [options]="bubbleChartOptions"
        [colors]="bubbleChartColors"
        [legend]="bubbleChartLegend"
        [chartType]="bubbleChartType">
    </canvas>
</div>

Also here is my typescript code describing ng2-charts

export class DashboardPage {
 bubbleChartOptions: ChartOptions = {
   responsive: true,
   scales: {
     xAxes: [
       {
         display: true,
         girdlines: { drawTicks: false, drawBorder: false, display: true}
         ticks: {display: false, stepSize: 1, min: 1, max: 7 }
       }
     ],
     yAxes: [
       {
         display: false,
         girdlines: { drawTicks: false, display: true}
         ticks: {display: false, stepSize: 1, min: 0, max: 10 }
       }
     ],
}
};
bubbleChartData: ChartDataSets[] = [
{
  data: [
    { x: 1, y: 2, r: 8, },
    { x: 2, y: 7, r: 8 },
    { x: 3, y: 5, r: 8 },
    { x: 4, y: 3, r: 8 },
    { x: 5, y: 8, r: 8 },
    { x: 6, y: 1, r: 8 },
    { x: 7, y: 5, r: 8 },
  ],
  label: '20',
  backgroundColor: 'white',
  borderColor: 'blue',
  borderWidth: 2,
  hoverBackgroundColor: 'purple',
  hoverBorderColor: 'red',
  },
 ];
 

1 post - 1 participant

Read full topic