Add a ChartJS Chart in Visual Studio

Widgets included to the DevExtreme Data Visualization library can be added to any DevExtreme application project. However, the DevExtreme SPA Framework -based Basic Application and Multi-Channel Application project templates allow you to do this easily. In these projects, views are built using the View Designer. This designer allows you to drag and drop widgets from the Toolbox to a view simulator. For details, refer to the Add Widgets topic. When you drag and drop the dxChart widget to the View simulator in the View Designer, you can use the Chart Designer to configure the chart easily. In this tutorial, you will add the dxChart widget to a view of the Basic Application project template and utilize the Chart Designer to configure the widget. As a result, you will get a chart that shows the population growth on each continent in the last sixty years.

Watch Video

Download Code

Create a Chart

To begin, you must first create a DevExtreme application in Visual Studio by using either the Basic Application or Multi-Channel Application project template supplied with the DevExtreme installation. From the Visual Studio main menu, select File | New | Project... to invoke the New Project dialog.

New Project Dialog

Select DevExtreme in the Projects tree view. In the Templates list view, select the DevExtreme XX.X Basic Application template, specify the new solution's name and click OK.

You will see a project with the specified name within the Solution Explorer. To learn how to build a mobile application utilizing DevExtreme projects, refer to the Your First Mobile App in Visual Studio tutorial. Here, you will learn how to add a chart to a view.

Double-click the home.dxView file to invoke the View Designer. It contains an area with the View's markup and a View simulator displaying this markup. In the simulator, select all elements in the View and remove them. Drag the dxChart item from the Toolbox to the View in the simulator.

Add Chart

A div element with the data-bind attribute set to dxChart is added. dxChart is custom Knockout binding that is supplied with ChartJS.

HTML
<div style="height: 300px;" data-bind='dxChart: {dataSource: [{ arg: "milk", val: 2 }, { arg: "soda", val: 3 }], series: { type: "bar"} }'></div>

To configure a widget, pass a configuration object as the constructor's parameter. The properties of this object represent the widget's configuration options; to specify them, set the required values to the configuration object's properties. As an example, the dataSource and series options are specified by default. Later in this tutorial, we will specify configuration options using the Chart Designer as well as in code.

Run this code in a browser to view a chart with sample data.

Provide Data

The data that we will use will be taken from the http://www.geohive.com resource.

To define the data source to be used for a chart series, assign an array of objects to the dataSource property of the Chart's configuration object. Declare this array in the View's ViewModel.

HTML
<div style="height: 300px;" data-bind="dxChart: { dataSource: dataSource }"></div>

Open the home.js file and add the dataSource field to the viewModel object.

JavaScript
Application1.home = function (params) {
    var viewModel = {
        //  Put the binding properties here
        dataSource: [
        {
            year: 1950, Africa: 227, Americas: 331,
            Asia: 1436, Europe: 547, Oceania: 12
        },
        {
            year: 1960, Africa: 285, Americas: 416,
            Asia: 1718, Europe: 605, Oceania: 15
        },
        {
            year: 1970, Africa: 365, Americas: 512,
            Asia: 2156, Europe: 657, Oceania: 19
        },
        {
            year: 1980, Africa: 478, Americas: 612,
            Asia: 2644, Europe: 695, Oceania: 22
        },
        {
            year: 1990, Africa: 633, Americas: 720,
            Asia: 3180, Europe: 722, Oceania: 26
        },
        {
            year: 2000, Africa: 810, Americas: 833,
            Asia: 3678, Europe: 731, Oceania: 30
        },
        {
            year: 2010, Africa: 1016, Americas: 936,
            Asia: 4149, Europe: 728, Oceania: 35
        }]
    };
    return viewModel;
};   

Open the home.dxView file and bind the dataSource configuration option to the ViewModel's dataSource field. In addition, remove the series option from the configuration object. We will set this option specifically for our data source below.

<div style="height: 300px;" data-bind='dxChart: {dataSource: dataSource}'></div>

Configure Chart Using Designer

Use the Chart Designer to configure series and other Chart elements.

To invoke the Chart Designer, open the home.dxView file and select the Chart element in the simulator. Chart properties are displayed in the Properties grid. Clicking the ellipsis button for options will begin the chart configuration process.

Invoke Chart Designer

The invoked Chart Designer allows you to set up chart options.

Chart Designer

Set Chart Title

In the general page, set the Chart Title option to Continental Population Shift (in millions).

Enable Tooltips

In the general page, set the Tooltip Enabled option to Yes.

Define Series

Now define chart series using data from the assigned data source. Switch to the Series page, where one series has already been added. Set the following options for it.

  • Name
    Specify a name for the series. It will be used to identify the series in the legend.

  • Argument Field
    Specify the field in the data source that provides arguments for series points.

  • Value Field
    Specify the field in the data source that provides values for series points.

To add series for the remaining data in the data source, add items to the Series list.

Add Series

Specify options for the newly added series in the same way as the first series.

To set the same type for all chart series, select the All Series Options item in the series list and set the Type option to Full-Stacked Area. In addition, set the Show Labels option to Yes and the Show Points option to No.

Relocate the Legend

To set options for the chart's legend, switch to the Elements page and select the Legend item in the elements list. Set the following options to position the legend at the bottom-center of the widget.

  • Vertical Position
    Set this option to Bottom

  • Horizontal Position
    Set this option to Center

Save Specified Values

Close the Designer by clicking the OK button. The values that are set in the Designer are saved to an object that is passed as a configuration object to the chart constructor.

HTML
<div style="height: 300px;" data-bind="dxChart:{
    dataSource:dataSource,
    title:{'text':'Continental Population Shift (in millions)'},
    tooltip:{'enabled':true},
    //...
}"></div>

As you can see in your code, you can use the commonSeriesSettings object to specify the options that are common for all series in the chart.

Set Options in Code

While the Chart Designer allows you to quickly begin configuring a dxChart widget, there are tasks that can be performed in code only. In such a case, refer to the Reference section for assistance. Then, specify the required options in the widget's configuration object, extending the content generated by the Designer.

To customize the text shown by tooltips so that they display the percentage of a point's value, specify the customizeText option within the tooltip configuration object that was created by the Designer within the widget's configuration object.

HTML
<div style="height: 300px;" data-bind="dxChart:{
    //...
    tooltip:{
        'enabled':true,
        'percentPrecision': 2,
        'customizeText': function (value) {
            return value.percentText;
        }
    },
    //...
}"></div>

To display labels connected to their points, define the label object within the commonSeriesSettings object, which was created by the Designer within the widget's configuration object. Specify the connector option within the label object.

HTML
<div style="height: 300px;" data-bind="dxChart:{
    //...
    commonSeriesSettings: { 
        //...
        'label': {
            'visible': true,
            'connector': {
                'visible': true
            }
        }
    //...
}"></div>      
NOTE
After extending the configuration object by the fields that are not supported by the Chart Designer, there is no capability to invoke the Chart Designer once again.
NOTE
Double quotes are not supported in the ChartDesigner.