Overview

Bunifu bubble chart is an extension of the Bunifu scatter Chart where each data marker is represented by a circle whose dimension forms a third variable. It displays three dimensions of data at the same time. The first two dimensions(X & Y axis) determines the location of the bubble. The third dimension is represented by the size of the individual bubbles. Though it’s called a bubble chart, the data marker can be rendered as either a circle, image or square using the BubbleType property. Bubble charts are also suitable for displaying dozens to hundreds of values, which is convenient for visualizing size values that differ by several orders of magnitude. Bubble charts are frequently used in market and product comparison studies.

Getting started

This section explains you the steps required to start creating a simple bubble chart and demonstrate the basic usage of the chart control.

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

Step 2: From the toolbox drag and drop the Bunifu bubble component to the form

Step 3: Add data to the Bubble chart component as demonstrated in quick tips

Step 4: On the target property of the Radar component select bunifuCanvas1 as the target component

Step 5: Run the application

Code

 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));
        }

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
​

Working with data

TargetCanvas

Gets and sets the canvas that will render the bubble chart components

Data

Gets and sets an array of numbers as the datasets for the bubble chart charts

Label

Gets and sets the text to draw on the chart’s legend

Bubble chart customization

BorderColor

Gets and sets a color value property to the bubble’s border.

BackgroundColor

Gets and sets a color value property to the bubble’s background

BorderWidth

Gets and sets an integer value that can modify the width of the bubble’s border.

PointStyle

Gets and sets a shape value to display as a data marker on the chart

Radius

Gets and sets the integer value that can change the radius (i.e. distance from the bubble’s center)

Rotation

Gets and sets the integer value that can change the angle of the point. Note: this works on all point styles except the circle point

Bubble Interactivity

HoverBackgroundColor

Gets and sets a color value property to the bubble’s background on a mouse hover event

HoverBorderWidth

Gets and sets an integer value property to the bubble’s border width on a mouse hover event

HoverRadius

Gets and sets the integer value that can change the radius (i.e distance from the center) of the point on a mouse hover event