Web Components Bubble Chart
The Ignite UI for Web Components Bubble Chart is a type of Scatter Chart that show markers with variable scaling to represent the relationship among items in several distinct series of data or to plot data items using x and y coordinates. These coordinates of the data point are determined by two numeric data columns. The Bubble Chart draws attention to uneven intervals or clusters of data. This chart is often used to plot scientific data, and can highlight the deviation of collected data from predicted results. The Bubble Chart has many of the characteristics of the [Scatter Marker Chart](<scatter-chart.md#web components-scatter-marker-chart>) but with the option to have various radius scale sizes.
Web Components Bubble Chart Example
You can create Ignite UI for Web Components Bubble Chart in
IgcDataChartComponent control using the
IgcBubbleSeriesComponent and two numeric axes, as shown in the example below.
Web Components Bubble Chart with Single Series
You can bind your data to
ItemsSource property of
IgcBubbleSeriesComponent and map data columns using its
radiusMemberPath properties, as shown in the example below:
Web Components Bubble Chart with Multiple Series
In Web Components Bubble Chart, binding multiple data sources works by setting each new data source to
ItemsSource property of a additional
IgcBubbleSeriesComponent, as shown in the example below:
Web Components Bubble Chart Styling
In Web Components Bubble Chart, you can customize shape of bubble markers using
markerType property, their size with
radiusScale property, and their appearance using
markerThickness properties. In addition, you can also color bubble markers based on a data column using
fillScale properties. In this example, usage of above properties is demonstrated.
The following table lists API members mentioned in the above sections: