# ChartJS

The [ChartJS ](http://www.chartjs.org)extension component uses the excellent ChartJS widget to render amazing charts in real time. Please note that this extension is still under development and some advanced options are not yet available. Nevertheless, it’s quite an extension!

![](https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MFp7MR1wemvcC5891_r%2Fuploads%2F8ObzB7DOug3c7Rm9847m%2Fimage.png?alt=media\&token=dd48b074-3119-4559-8e64-ed6ee2cc6c4d)

{% embed url="<https://github.com/iceteagroup/wisej-extensions/tree/master/Wisej.Web.Ext.ChartJS>" %}
ChartJS Source Code
{% endembed %}

## Features

The **ChartJS** Extension includes the following chart types:

* Line
* Bar
* HorizontalBar
* Radar
* PolarArea
* Pie
* Doughnut
* Bubble
* Scatter

## How to Use

The **ChartJS** extension can be added to a Wisej.NET project using NuGet Package Manager.

{% embed url="<https://www.nuget.org/packages/Wisej-3-ChartJS>" %}

You can configure your instance by setting Chart specific *Options*.

For example, you can disable the tooltip using Options:

{% tabs %}
{% tab title="C#" %}
{% code overflow="wrap" %}

```csharp
chartJS1.Options.Tooltips = new Wisej.Web.Ext.ChartJS.OptionsTooltips { Enabled = false };
```

{% endcode %}
{% endtab %}

{% tab title="VB.NET" %}
{% code overflow="wrap" %}

```vb
ChartJS1.Options.Tooltips = New Wisej.Web.Ext.ChartJS.OptionsTooltips With {.Enabled = False}
```

{% endcode %}
{% endtab %}
{% endtabs %}

You can set the minimum and maximum values on the Y axis using Options:

{% tabs %}
{% tab title="C#" %}
{% code overflow="wrap" %}

```csharp
chartJS1.Options.Scales.yAxes = new[]
{
    new OptionScalesAxesY { Ticks = new OptionsScalesTicks { Min = 1, Max = 100 } }
};
```

{% endcode %}
{% endtab %}

{% tab title="VB.NET" %}
{% code overflow="wrap" %}

```vb
chartJS1.Options.Scales.yAxes = {
    New OptionScalesAxesY With {
        .Ticks = New OptionsScalesTicks With {
            .Min = 1,
            .Max = 100
        }
    }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

Data is provided in *DataSets*.

### Code sample

The code snippet below:

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

```csharp
var data = new object[10];            
Random random = new Random();
for (int i = 0; i < 10; i++)
{
        data[i] = new Point(i, random.Next(10));
}
DataSet ds = chartJS1.DataSets.Add("ds1");
ds.Data = data;
ds.BackgroundColor = Color.Red;
```

{% endtab %}

{% tab title="VB.NET" %}

```vb
Dim data(9) As Object
Dim random As New Random()
For i As Integer = 0 To 9
    data(i) = New Point(i, random.Next(10))
Next

Dim ds = ChartJS1.DataSets.Add("ds1")
ds.Data = data
ds.BackgroundColor = Color.Red
```

{% endtab %}
{% endtabs %}

Creates the following chart:

![](https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFp7MR1wemvcC5891_r%2F-MibtbZKSHZQ1kcYrZ-2%2F-Mic8FpE2Vx467lcV-tE%2Fimage.png?alt=media\&token=a9d8a80a-cea9-4be4-9bbb-32fa5fb37d3b)

{% hint style="warning" %}
Make sure to set the labels of the chart either in the [Designer](https://docs.wisej.com/docs/concepts/designer) or via code. If there are no labels, the points on the graph will not be shown.
{% endhint %}

You can add labels to the X axis like so:

{% tabs %}
{% tab title="C#" %}
{% code overflow="wrap" %}

```csharp
// Numeric labels
this.chartJS1.Labels = new string[] {"1","2","3","4"};

// Day of the week labels
this.chartJS1.Labels = new string[] {"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"};
```

{% endcode %}
{% endtab %}

{% tab title="VB.NET" %}
{% code overflow="wrap" %}

```vbnet
'Numeric labels
Me.ChartJS1.Labels = New String() {"1", "2", "3", "4"}

'Day of the week labels
Me.ChartJS1.Labels = New String() {"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"}
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Find more information in our **ChartJS** example in [C#](https://github.com/iceteagroup/wisej-examples/tree/2.2/ChartJS) or in [VB.NET](https://github.com/iceteagroup/wisej-examples-vb/tree/main/ChartJS).
{% endhint %}