# Bunifu Bubble Chart

## Overview

**Bunifu bubble chart** is a type of chart that displays three dimensions of data. It is an extension of the X-Y Bunifu scatter charts. Unlike Bunifu Scatter the Bubble chart has a radius value which is a third variable, that will determine the size of the bubble**.** This type of chart is a helpful tool for analyzing data sets with multiple inputs, furthermore, visualizing patterns, and find trends using data analysis.

## Getting started

### Getting started with Design View

This section explains the steps required to start creating a simple bubble chart and demonstrates the primary usage of the chart control.

Suppose we have the sample shipments data below and we need to plot its values in the bubble chart plot.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-McDdA8PrB3R3mG8khBT%2F-McETyzyCkxWoXLIy6ig%2Fimage.png?alt=media\&token=d8182937-ee75-4a1f-a9c7-8f438f60eda3)

Here's how we can do it:

**Step 1:** Drag the canvas control to the form from the toolbox.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-McDdA8PrB3R3mG8khBT%2F-McDjHwaxGBhsyJ6azSR%2Fimage.png?alt=media\&token=aa232f4d-e37c-4329-9f99-fc92140985ac)

**Step 2:** Search for `BunifuBubbleChart` in the toolbox and drag it to the form. 

**Step 3:** Access the target property of the bubble chart, set it to target the canvas in the form.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-McDdA8PrB3R3mG8khBT%2F-McDisEjLGah1PvLUEi8%2Fimage.png?alt=media\&token=77f88517-864a-4260-8d58-c1b69e989a4b)

{% hint style="info" %}
Each region in the shipments table above will be represented by a bubble. 
{% endhint %}

**Step 4:** Copy and paste the `bunifuBubbleChart` components in the component tray until there are six of them(the six regions will be presented by the bubbles).

**Step 5:** Go to the **Name** property and give a meaningful name to the bubble chart components.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-McDdA8PrB3R3mG8khBT%2F-McEJY8Vcr2MOp4u2pCj%2Fimage.png?alt=media\&token=cb4c4dd1-e318-45d5-ac81-7bfb8b53412a)

Also, go to the **Label** property and assign the continent name of the bubble components. For instance, the `AustralianBunifuBubble` will have a label of `Australia` 

**Step 6:** Access the **Color** or the **BackgroundColor** property  and set a color value for each bubble component.

{% hint style="info" %}
For instance we can set the following color values for the following bubble components:

1. `EuropeBunifuBubble` - 101, 212, 133
2. `NorthAmericaBubble` - 0, 165, 207
3. `AsiaBunifuBubble` - 159, 255, 203
4. `AustrilianBunifuBubble` - 37, 161, 142
5. `SouthAmericaBunifuBubble` - 122, 229, 130
6. `AfricaBunifuBubble` - 0, 78, 100
   {% endhint %}

**Step** 7: Go to the **Data** property of each bubble component and set the data as per the shipments table. The **sales (USD)** values shall be plotted on **X-axis**, the **profitability rate** values shall be on the **Y-axis** and the number of **units sold** shall be plotted on the **radius** of the bubble.

Ensure that each bubble component has one data member as illustrated below:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-McEuCo8w3ZI-Zo8WiCF%2F-McEwqMVWXmlrcyUoRhm%2Fimage.png?alt=media\&token=93523723-f85a-435d-93c1-6835aeb3954e)

**Step 6:** Access the canvas properties and set the correct padding and add X and Y-axis label values:

**Step 8:** Run the application:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-McDdA8PrB3R3mG8khBT%2F-McEZgXIQhz8-chQWi9B%2FBubble01.gif?alt=media\&token=04b896a0-93b9-44ad-b0f3-1875c3d92462)

We can code and render a bubble chart without using the design view. Here's how to do it:

### Code

{% tabs %}
{% tab title="C#" %}

```csharp
 void renderBubbleChart()
        {
            Bunifu.Charts.WinForms.ChartTypes.BunifuBubbleChart bunifuBubbleChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuBubbleChart();
            /*
             * For this example we will use random values
             */
            var r = new Random();

            /*
             * Add your data from your source - accepts 3D points
             * Below is an example from a random values
             */

            List<Bunifu.Charts.WinForms.Point3D> point3Ds = new List<Bunifu.Charts.WinForms.Point3D>();

            for (int i = 0; i < 5; i++)
            {
                Bunifu.Charts.WinForms.Point3D point3D = new Bunifu.Charts.WinForms.Point3D();
                point3D.X = r.Next(0, 20);
                point3D.Y = r.Next(0, 20);
                point3D.Radius = r.Next(0, 20);
                point3Ds.Add(point3D);
            }
            Bunifu.Charts.WinForms.Point3D[] data = point3Ds.ToArray();
           
           
            /*
             * Set your data             
             */
            bunifuBubbleChart.Data = data;

            /*
             * Specify the target canvas
             */
            bunifuBubbleChart.TargetCanvas = bunifuChartCanvas1;

           
            /*
             * Beautify the chart by sepcifying the color
             */
           
            bunifuBubbleChart.BackgroundColor = Color.FromArgb(r.Next(256), r.Next(256), r.Next(256));
        }
```

{% endtab %}

{% tab title="VB" %}

```csharp
Private Sub renderBubbleChart()
    Dim bunifuBubbleChart As Bunifu.Charts.WinForms.ChartTypes.BunifuBubbleChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuBubbleChart()
    ' 
    '  For this example we will use random values
    ' 
    Dim r = New Random()

    ' 
    '  Add your data from your source - accepts 3D points
    '  Below is an example from a random values
    ' 

    Dim point3Ds As List(Of Bunifu.Charts.WinForms.Point3D) = New List(Of Bunifu.Charts.WinForms.Point3D)()

    For i As Integer = 0 To 5 - 1
        Dim point3D As Bunifu.Charts.WinForms.Point3D = New Bunifu.Charts.WinForms.Point3D()
        point3D.X = r.[Next](0, 20)
        point3D.Y = r.[Next](0, 20)
        point3D.Radius = r.[Next](0, 20)
        point3Ds.Add(point3D)
    Next

    Dim data As Bunifu.Charts.WinForms.Point3D() = point3Ds.ToArray()


    ' 
    '  Set your data             
    ' 
    bunifuBubbleChart.Data = data

    ' 
    '  Specify the target canvas
    ' 
    bunifuBubbleChart.TargetCanvas = bunifuChartCanvas1


    ' 
    '  Beautify the chart by sepcifying the color
    ' 

    bunifuBubbleChart.BackgroundColor = Color.FromArgb(r.[Next](256), r.[Next](256), r.[Next](256))
End Sub

```

{% endtab %}
{% endtabs %}

{% hint style="success" %}
Let us examine Bunifu Bubble charting properties.
{% endhint %}

## Bubble Data Properties

### **1. Target Canvas**

This property gets or sets the canvas which will render the bubble chart. The canvas's scale is automatically set by the bubble data.&#x20;

### 2. Data

This property gets or sets the X, Y and, radius value that will render a data point in the canvas.&#x20;

{% hint style="danger" %}
One concern when setting the radius is that setting it too large will result in the bubble covering the entire canvas; therefore, avoid setting the radius to a size that will cover the other data points.
{% endhint %}

Setting data can be accomplished by both design and coding. Consider creating the data using the coding method using both the C# and the VB.NET programming languages.

### 3. Order

The order property gets and sets the z-order index of a dataset in the case of multiple datasets. A dataset with a lower order number will be prioritized above other bubble datasets.

&#x20;

{% hint style="info" %}
For instance, consider a pair of charts targeted to the same canvas. Set the first bubble chart with an order value of **0** and another chart set to an order value of **1**. The chart with an order value of 0 will be displayed above all other chart components with an order value of 1 or greater.
{% endhint %}

### 4. Label

This property gets and sets the text to display on the chart’s legend. To format the label, use the **Legend** properties available from the canvas properties.

## Bubble Background and border Properties

### **Background properties**

#### **1. BackgroundColor**

This property gets or sets the bubble's background color value. We can specify the colors using the `Red Green Blue (RGB)` color format as well as the `Alpha, Red, Green, and Blue (ARGB)` color value.

#### **2. HoverBackgroundColor**

This property sets a back color value to a bubble that is hovered by the mouse pointer. Similarly to the `BackgroundColor` property, we can specify an `RGB` or `ARGB` color value.

### Border properties

#### 1. BorderColor

This property gets or sets a color value property to the bubble's borders. We can specify the colors using the .NET Framework colors, or a custom RGB standard color format, or the ARGB color format.

#### 2. BorderWidth

This property gets or sets an integer value that can modify the width of the bubble's border. A greater integer value results in a thick border.

#### 3. HoverBorderWidth

This property gets or sets an integer value that changes the width of the boundary of a bubble when hovered.

#### 4. HoverRadius

This property gets or sets an integer value that increases or decreases the currently set radius (i.e the distance between the border and the center) of the bubble when hovered.

## Bubble Point Properties

### 1. PointStyle

The PointStyle property gets or sets the shape as a data marker on the chart. The default value is the circle shape.

### 2. Rotation

This property gets or sets the integer value that can change the angle of the point.&#x20;

{% hint style="info" %}
The rotation property is applicable on all point forms except the circle shape
{% endhint %}

## Take Away

Bubble Charts are typically used to compare and show the relationships between categorized circles, by the use of positioning and proportions. The overall picture of Bubble Charts can be used to analyze patterns/correlations and test hypotheses.

In a design-first, technology-driven world, using visualizations like bubble charts to communicate a people-centered story is paramount. Bubble charts have the potential to compress and condense large datasets for hundreds, sometimes thousands of data points in a single view.&#x20;