# Quick Tips

## Getting Started fast with Bunifu Charts

To get started quickly after [installing and licensing](https://docs2.bunifuframework.com/docs/getting-started/install) Bunifu charts here are some of the tips to get you started quickly.

After loading the components to toolbox

## Step 1

Find **BunifuChartCanvas** and drag and drop to your form of user control designer(see below)

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MSSG6IVWdTniNaN64Lb%2F-MSWQcj22DWHUWHpSgsc%2Fimage.png?alt=media\&token=fd23ddc2-171c-40db-9dc9-bf7c2b6165dd)

## Step 2

Next find your preferred chart component - drag and drop to your form or user control(see below)

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MSSG6IVWdTniNaN64Lb%2F-MSWQZ-ViKXLbKzIS8Eq%2Fimage.png?alt=media\&token=30d55fcc-e114-456b-8c47-28f63fc57ffc)

You can as well use code below

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

```csharp
Bunifu.Charts.WinForms.ChartTypes.BunifuBarChart bunifuChart= new Bunifu.Charts.WinForms.ChartTypes.BunifuBarChart();
```

{% endtab %}

{% tab title="VB" %}

```csharp
Dim bunifuChart As Bunifu.Charts.WinForms.ChartTypes.BunifuBarChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuBarChart()
```

{% endtab %}
{% endtabs %}

## Step 3

Select the chart component and specify the canvas and your data by using the designer or code(see below)

*Designer*

<div align="left"><img src="https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MSSG6IVWdTniNaN64Lb%2F-MSWVI4sExt1-uJF9oC2%2Fimage.png?alt=media&#x26;token=88c3d2be-87b3-48b0-8de7-f5620d78940b" alt=""></div>

*Code*

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

```csharp
/*
* For this example we will use random numbers
*/
var r = new Random();

/*
* Add your data from your source - accepts double list
* Below is an example from a random number
*/
List<double> data = new List<double>();
for (int i = 0; i < 5; i++)
{
  data.Add(r.NextDouble());
}
/*
* Set your data             
*/
bunifuBarChart1.Data = data;

/*
* Specify the target canvas
*/
bunifuBarChart1.TargetCanvas = bunifuChartCanvas1;
```

{% endtab %}

{% tab title="VB" %}

```csharp
    ' 
    '  For this example we will use random numbers
    ' 
    Dim r = New Random()

    ' 
    '  Add your data from your source - accepts double list
    '  Below is an example from a random number
    ' 
    Dim data As List(Of Double) = New List(Of Double)()

    For i As Integer = 0 To 5 - 1
        data.Add(r.NextDouble())
    Next

    ' 
    '  Set your data             
    ' 
    bunifuBarChart1.Data = data

    ' 
    '  Specify the target canvas
    ' 
    bunifuBarChart1.TargetCanvas = bunifuChartCanvas1
```

{% endtab %}
{% endtabs %}

## Step 4

You'll need to specify the Labels for charts like Bar chart, so select your canvas and go to Labels Property and add your labels per line

*Designer*

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MSSG6IVWdTniNaN64Lb%2F-MSWbcZgVx4_tssgO-2i%2Fimage.png?alt=media\&token=9c122718-ed60-4f12-893a-b14fad9a3c4d)

*Code*

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

```csharp
/*
* Add labels to your canvas
* Label count should correspond to data count for charts like Bar charts
*/
bunifuChartCanvas1.Labels = new string[] { "Label1", "Label2", "Label3", "Label4", "Label5" };

```

{% endtab %}

{% tab title="VB" %}

```csharp
' 
'  Add labels to your canvas
'  Label count should correspond to data count for charts like Bar charts
' 
bunifuChartCanvas1.Labels = New String() {"Label1", "Label2", "Label3", "Label4", "Label5"}
```

{% endtab %}
{% endtabs %}

## Step 5

Finally you'll need to beautify your chart by changing the background for each value. This can be done using code or by using the designer(see below)

*Designer*

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MSSG6IVWdTniNaN64Lb%2F-MSWegvDD6aFbGr0VxUX%2Fimage.png?alt=media\&token=0fb64342-81d0-44c6-96df-76156299a016)

*Code*

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

```csharp
/*
* Beautify the chart by sepcifying the colors
* Color count should correspond to data count
*/
List<Color> bgColors = new List<Color>();
bgColors.Add(Color.Red);
bgColors.Add(Color.Blue);
bgColors.Add(Color.Green);
bgColors.Add(Color.Gray);
bgColors.Add(Color.Purple);
  
bunifuBarChart1.BackgroundColor = bgColors;
```

{% endtab %}

{% tab title="VB" %}

```csharp
    ' 
    '  Beautify the chart by sepcifying the colors
    '  Color count should correspond to data count
    ' 
    Dim bgColors As List(Of Color) = New List(Of Color)()
    bgColors.Add(Color.Red)
    bgColors.Add(Color.Blue)
    bgColors.Add(Color.Green)
    bgColors.Add(Color.Gray)
    bgColors.Add(Color.Purple)
    bunifuBarChart1.BackgroundColor = bgColors
```

{% endtab %}
{% endtabs %}

Or generate random colors

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

```csharp
/*
* Beautify the chart by sepcifying the colors
* Color count should correspond to data count
*/
List<Color> bgColors = new List<Color>();
for (int i = 0; i < data.Count; i++)
 {
   bgColors.Add(Color.FromArgb(r.Next(256), r.Next(256), r.Next(256)));
 }

bunifuPieChart.BackgroundColor = bgColors;

```

{% endtab %}

{% tab title="VB" %}

```csharp
    ' 
    '  Beautify the chart by sepcifying the colors
    '  Color count should correspond to data count
    ' 
    Dim bgColors As List(Of Color) = New List(Of Color)()

    For i As Integer = 0 To data.Count - 1
        bgColors.Add(Color.FromArgb(r.[Next](256), r.[Next](256), r.[Next](256)))
    Next

    bunifuPieChart.BackgroundColor = bgColors
```

{% endtab %}
{% endtabs %}

Here is the complete code

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

```csharp
/*
* For this example we will use random numbers
*/
var r = new Random();

/*
* Add your data from your source - accepts double list
* Below is an example from a random number
*/
List<double> data = new List<double>();
for (int i = 0; i < 5; i++)
{
  data.Add(r.NextDouble());
}
/*
* Set your data             
*/
bunifuBarChart1.Data = data;

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

/*
* Add labels to your canvas
* Label count should correspond to data count for charts like Bar charts
*/
bunifuChartCanvas1.Labels = new string[] { "Label1", "Label2", "Label3", "Label4", "Label5" };
/*
* Beautify the chart by sepcifying the colors
* Color count should correspond to data count
*/
List<Color> bgColors = new List<Color>();
for (int i = 0; i < data.Count; i++)
 {
   bgColors.Add(Color.FromArgb(r.Next(256), r.Next(256), r.Next(256)));
 }

bunifuPieChart.BackgroundColor = bgColors;


```

{% endtab %}

{% tab title="VB" %}

```csharp
    ' 
    '  For this example we will use random numbers
    ' 
    Dim r = New Random()

    ' 
    '  Add your data from your source - accepts double list
    '  Below is an example from a random number
    ' 
    Dim data As List(Of Double) = New List(Of Double)()

    For i As Integer = 0 To 5 - 1
        data.Add(r.NextDouble())
    Next

    ' 
    '  Set your data             
    ' 
    bunifuBarChart1.Data = data

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

    ' 
    '  Add labels to your canvas
    '  Label count should correspond to data count for charts like Bar charts
    ' 
    bunifuChartCanvas1.Labels = New String() {"Label1", "Label2", "Label3", "Label4", "Label5"}
    ' 
    '  Beautify the chart by sepcifying the colors
    '  Color count should correspond to data count
    ' 
    Dim bgColors As List(Of Color) = New List(Of Color)()

    For i As Integer = 0 To data.Count - 1
        bgColors.Add(Color.FromArgb(r.[Next](256), r.[Next](256), r.[Next](256)))
    Next

    bunifuPieChart.BackgroundColor = bgColors
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
For complete code for whole **Bunifu Charts** see this [gist](https://gist.github.com/k33ptoo/49342eaefb4950e233ec29d547041411)
{% endhint %}