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. In this tutorial, you will add the dxChart widget to a view of the Basic Application project template. As a result, you will get a chart that shows the population growth on each continent in the last sixty years.

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.

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>

Set Chart Options

To configure a dxChart widget, specify the required options in its configuration object.

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 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 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>