Introduction

Create stunning visualizations and responsive charts for your dashboards and data-centric applications

Overview

Bunifu Charts is a well-crafted chart component to visualize your application data. It contains a rich gallery of 7+ charts and graphs and its high performance helps render large amounts of data quickly. It also comes with features such as animations, tooltips, and awesome customizations that are easily configurable.

Here’s is an application utilizing Bunifu Charts to visualize its data:

Getting Started

Let's look at these seven steps to quickly start using this control by building a simple basic bar chart.‌

Step 1: From the toolbox, look for the control named BunifuChartCanvas and drag it to your form. The canvas will then display a set of grids on both the X-Axis and Y-Axis, as shown below:

‌Step 2: Pick the BunifuBarChart component and drag it to the form. Once dropped in the form, it will appear in the space below the form i.e., the (component tray). There will be two sets of properties displayed on the component's fly, i.e., the TargetCavas and Data properties.

‌Step 3: In the TargetCanvas dropdown field, make sure you select the canvas control (dragged on step one) as the target. Here's a gif preview of the two above steps:

‌Step 4: Navigate to the canvas's properties on the form and look for the label's property and click its three-dotted button. Copy the following data and paste it into the label field:

Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday

🧙‍♂️ As you paste the data make sure each string ish on its own line

‌Step 5: Get to the properties of bunifuBarChart1. In the data property click its three-dotted button and start adding the following values for each label pasted above:

In the label field, remember to put a label that tells us what the data is presenting. For this case put the label as the Number of users.

Step 6: Run the demo. You should see the form displayed as below:

Chart structure

This section gives you an idea of the different sections of the chart control. Below is the image that illustrates the various sections: