# Using Syncfusion Charts in Radzen

**URL:** <https://forum.radzen.com/t/using-syncfusion-charts-in-radzen/725>\
**Category:** Uncategorized\
**Created:** [December 4, 2018, 12:37am UTC](https://forum.radzen.com/t/using-syncfusion-charts-in-radzen/725 "2018-12-04T00:37:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![alistair](https://forum.radzen.com/user_avatar/forum.radzen.com/alistair/32/1011_2.png) [@alistair](https://forum.radzen.com/u/alistair)\
**Post date:** [December 4, 2018, 12:37am UTC](https://forum.radzen.com/t/using-syncfusion-charts-in-radzen/725/1 "2018-12-04T00:37:21Z")

</div>

Syncfusion provides a large range of controls for angular [https://www.syncfusion.com/angular-ui-components](https://www.syncfusion.com/angular-ui-components)

There is a community version of the controls [https://www.syncfusion.com/products/communitylicense](https://www.syncfusion.com/products/communitylicense)

So I played around and managed to get it working I'm not a angular developer but have used Syncfusion in Lightswitch.

Here is the steps I took you should be able to get this up and going in

1. Have NodeJS installed
2. Create a Radzen angular application and add a page
3. Run the application so that it generates its code and stop it
4. Start the command prompt and go to radzen-app-dir\client
5. Install the Charts by running the following command npm install @syncfusion/ej2-angular-charts --save
6. Open app.module.ts in notepad it is in the following path radzen-app-dir\client\src\app\app.module.ts
7. Add the following to the file and save it  
At the top add

import { ChartModule ,ILoadedEventArgs, ChartComponent, ChartTheme} from '@syncfusion/ej2-angular-charts';  
import { CategoryService, ColumnSeriesService, LineSeriesService,LegendService, DataLabelService, MultiLevelLabelService, SelectionService,TooltipService} from '@syncfusion/ej2-angular-charts'

under @NgModule  
imports: add ,ChartModule  
providers add ,CategoryService, ColumnSeriesService, LineSeriesService,LegendService, DataLabelService, MultiLevelLabelService, SelectionService,TooltipService

It should look something like this

 ![image](https://forum.radzen.com/uploads/default/original/1X/cf2b2b976a88297643069f9e6c44796caf5a0fcc.png)

1. In Radzen create a Odata dataSource and select the sample odata source
2. Go to the page event and add a event handler to the load event and set it to Invoke data source method. Set Name to getProducts. Add the Then handler and set Type to Set property,Name to products and Value to ${result.value}.
3. Drag and drop a Html component
4. add the following code to it

```
   <e-series [dataSource]='products' type= 'Column' name='Products' width='3' xName='Id' yName='ProductPrice' ></e-series>

   </e-series-collection>
</ejs-chart>

```

You now have a working Chart

 ![image](https://forum.radzen.com/uploads/default/original/1X/d98e7a7ade4b0bc140051d47a6e1c2e449d6f63a.png)

I also wanted to try setting some properties of the chart control.

**Here is how you add a border**

In the page events Set a property called border to { width: 2, color: '#FF0000'};

 ![image](https://forum.radzen.com/uploads/default/original/1X/0b1dcd36a5f6f47c25090d57f3d3004dffb24687.png)

Paste the following code into the html control replacing what was there

\<ejs-chart id="chart-container" style='display:block' align='center' [border]='border' title='Syncfusion Bar Chart' \>

You should now get a red border

 ![image](https://forum.radzen.com/uploads/default/original/1X/fc4253c9d71fa7c43e505bff5f6c14ca6a9cdf40.png)

```
   <e-series [dataSource]='products' type= 'Column' name='Products' width='3' xName='Id' yName='ProductPrice' ></e-series>

   </e-series-collection>
</ejs-chart>

```

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [December 4, 2018, 7:25am UTC](https://forum.radzen.com/t/using-syncfusion-charts-in-radzen/725/2 "2018-12-04T07:25:05Z")

</div>

Excellent tutorial! Thanks @alistair! 👏

---

<div class="post-metadata">

**Author:** ![John\_Willems](https://forum.radzen.com/user_avatar/forum.radzen.com/john_willems/32/1298_2.png) [@John\_Willems](https://forum.radzen.com/u/John_Willems)\
**Post date:** [December 5, 2018, 1:44pm UTC](https://forum.radzen.com/t/using-syncfusion-charts-in-radzen/725/3 "2018-12-05T13:44:06Z")

</div>

Really a nice tutorial, thanks for it.

---

<div class="post-metadata">

**Author:** ![mcanavar](https://forum.radzen.com/letter_avatar_proxy/v4/letter/m/ee59a6/32.png) [@mcanavar](https://forum.radzen.com/u/mcanavar)\
**Post date:** [August 19, 2020, 12:14pm UTC](https://forum.radzen.com/t/using-syncfusion-charts-in-radzen/725/4 "2020-08-19T12:14:21Z")

</div>

> [@alistair](#):
>
> a Odata dataSource

Hi,  
Great tutorial, thanks for that.  
Question, does this only work with a OData datasource , could we use the Radzen datasource connected to MS SQLserver ?

---

<div class="post-metadata">

**Author:** ![alistair](https://forum.radzen.com/user_avatar/forum.radzen.com/alistair/32/1011_2.png) [@alistair](https://forum.radzen.com/u/alistair)\
**Post date:** [August 19, 2020, 7:44pm UTC](https://forum.radzen.com/t/using-syncfusion-charts-in-radzen/725/5 "2020-08-19T19:44:15Z")

</div>

Yes it will work with MS SQL

---

<div class="post-metadata">

**Author:** ![mcanavar](https://forum.radzen.com/letter_avatar_proxy/v4/letter/m/ee59a6/32.png) [@mcanavar](https://forum.radzen.com/u/mcanavar)\
**Post date:** [August 20, 2020, 11:39am UTC](https://forum.radzen.com/t/using-syncfusion-charts-in-radzen/725/6 "2020-08-20T11:39:05Z")

</div>

> [@alistair](#):
>
> npm install @syncfusion/ej2-angular-charts --save

Just to let you know , it seems not to work anymore with the data from MSSQL , something seems to be broken with the ODATA returned bij Radzen (dev localhost:5000/odata/... ) .

With the sample ODATA works ok .