score:2

Accepted answer

i've had a look at the source code. as of version 1.1.0 (may 17 2016), bubble charts do not appear to be supported.

score:0

the npm package ng2-charts now supports bubble charts (as of version 2.0.0-beta.10)

here's the snippet from the demo app:

<div style="display: block">
  <canvas basechart [datasets]="bubblechartdata" [options]="bubblechartoptions" [colors]="bubblechartcolors"
    [legend]="bubblechartlegend" [charttype]="bubblecharttype"></canvas>
</div>

code:

import { component, oninit } from '@angular/core';
import { chartoptions, charttype, chartdatasets } from 'chart.js';
import { color } from 'ng2-charts';

@component({
  selector: 'app-bubble-chart',
  templateurl: './bubble-chart.component.html',
  styleurls: ['./bubble-chart.component.scss']
})
export class bubblechartcomponent implements oninit {
  public bubblechartoptions: chartoptions = {
    responsive: true,
    scales: {
      xaxes: [{ ticks: { min: 0, max: 30, } }],
      yaxes: [{ ticks: { min: 0, max: 30, } }]
    }
  };
  public bubblecharttype: charttype = 'bubble';
  public bubblechartlegend = true;

  public bubblechartdata: chartdatasets[] = [
    {
      data: [
        { x: 10, y: 10, r: 10 },
        { x: 15, y: 5, r: 15 },
        { x: 26, y: 12, r: 23 },
        { x: 7, y: 8, r: 8 },
      ],
      label: 'series a',
    },
  ];

  public bubblechartcolors: color[] = [
    {
      backgroundcolor: [
        'red',
        'green',
        'blue',
        'purple',
      ]
    }
  ];

  constructor() { }

  ngoninit() {
  }
}

(i am a collaborator on that package).


Related Query

More Query from same tag