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).
Source: stackoverflow.com
Related Query
- How to make Chart.js Bubble chart with ng2-chart?
- How to make a chart with an associative array with chart.js?
- ChartJS: how to make a bar chart with a horizontal guideline:
- How to make dynamic chart using Vue component with chart-js
- How do you make a progressive line chart with time as the X axis?
- How can I make streaming chart with react?
- How to make chart with chartjs.?
- How to make a chart with chartjs and Angular?
- How to make a chart with a string values instead of data?
- How to fix size of mixed chart with bubble chart in Chart.js?
- How to make interactive a chart with chart.js
- How do I make a pie chart showing number of people in an age group with JSON and ChartJS?
- How to make dynamic chart with the next view? What libraries allows to customise exactly this like in my design?
- How to make chart which has both positive and negative value, starts with 0 - x axis
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How can I make two of my lines in Chart JS thicker
- How to prevent first/last bars from being cut off in a chart with time scale
- How can I make a stepline or stepped chart in chart.js or D3?
- How to fix chart Legends width-height with overflow scroll in ChartJS
- How to display Line Chart dataset point labels with Chart.js?
- chart js how to fill legend box with colour
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- chartjs: How to plot multi-line chart with irregular intervals
- How to display inline values in a stacked bar chart with Chart.js?
- How to display data labels outside in pie chart with lines in ionic
- How to display the labels in doughnut chart using ng2 charts?
- how to make a chart.js bar chart scrollable
- Chart.js Bubble chart with custome X-axis labels
- how to programmatically make a line chart point active/highlighted
- How can I trigger the hover mode from outside the chart with charts.js 2?
More Query from same tag
- Ionic 3 + Angular 4 + chart.js - loading data from array
- Pagination for Chart.js line chart?
- how to programmatically make a line chart point active/highlighted
- Chart.js v2 charts do not display inside angular 2 (but Chart.js v1 works perfectly)
- wrong rendered bar chart Chart.js
- Iterate over query for use in Charts.js using Coldfusion
- Is it possible to add image behind doughnut chart with transparency color in ng2chart?
- CharJS 2.5.0 - How to remove space between bars
- How to toggle between Custom tooltip and normal tooltip in chartjs and angular
- How do I increase the arrow length on the pie chart in Charts.js?
- Chart.js, how to reduce space between labels and bars (horizontal bar chart)
- Draw a mathematical function in chartjs
- Increase gap between line-chart and legend ChartJS
- How to change width of the chart using Chart.js
- Chart.js mouseover tooltips appears when cursor in wrong position
- Javascript OnChange to update data
- how to put a y-axis and x-axis label while using html and chartjs
- Cannot change anything in chart options
- Changing tooltip color in Chart.js
- How do you set up a chart.js scatter line chart through angular-chart.js?
- Chart.js, set a max value
- How do I use my chart.js line chart with handlebars?
- (Typescript) How do you set pointRadius, pointHoverRadius, ect in ChartJs 3.7.0 & react-chart-js-2 4.0.1
- Polar Area Chart
- Is there a way to draw floating rectangle using chart.js
- Make Chart.js canvas responsive inside the resizeable div
- tc-angular-chartjs problems while assigning value to chart-data
- ChartJS - Uncaught SyntaxError: Unexpected number
- ChartJS add custom tooltip to a stacked bar chart
- Add data to line chart using chart.js