ChartistJs : Create Responsive Charts in C# [ Pie Chart, Donut Chart]

 Responsive charts in This article explains how to create responsive charts in C# with the database. For creating  responsive charts, we are using Chartist.Js JavaScript Library. There is NO doubt that Responsive Web Design is very important for today’s Webdesign point of view.

As Smartphone and tablet adoption rapidly increases, so does the importance of mobile-friendly websites. Creating Charts / Report is also a part in web applications.

So here we are going to demonstrate the using of Chartist.js in Webform to create a beautiful responsive pie chart and donut chart with MS SQL server database connectivity.

What is Chartist-Js?

Chartist-js is a simple responsive chart which provide highly customizable responsive chart options. The following facts should give you an overview why to choose Chartists as your front-end chart generator:

  • Simple handling while using convention over configuration
  • Great flexibility while using clear separation of concerns (Style with CSS & control with JS)
  • Usage of SVG (Yes! SVG is the future of illustration in web!)
  • Fully responsive and DPI independent
  • Responsive configuration with media queries
  • Fully built and customizable with Sass.


Create Responsive chart in C#
Create Responsive Chart in C#

So now using this awesome plugin we can create responsive charts in our C# Web Application (Web forms).

Steps to create responsive charts in C#

  1. Download and import Chartist-js library and CSS files.
  2. Create database .i.e table with some data.
  3. Add HTML Markup: Div tag where pie chart will display.
  4. Server-side code: Create a WebService (WebMethod) which returns data.
  5. Client-side code: Code to initialize Chartist-js and binding data, jQuery ajax call.

Let’s head up to each method step by step for creating responsive pie chart.

# Download and import Chartist-js library and CSS files.

Downloading Chartist-js (JS and CSS files) is very easy, you can download directly from Chartist-js official website or you can import from CDN

Make sure after downloading import it into your Web Application. Also, add the lastest jQuery library file in our web page. You can host the jQuery file on your server or you can also use from the Google-hosted site (recommended, performance wise).

Now we are done with downloading so our head tag looks like as shown below.

# Create database .i.e table with some data.

Here we are creating a pie chart which shows total population location wise.

So I have created a dummy table with data. In our database, we have a Table named as tb_city_population, and column as City Name and Population have a look at table schema at Fig 1 and then added some data into our table as shown in Fig 2.

Fig 1:

Database design schemna used to build responsive pie chart using chartist-js in c#

Fig 2:

Database - add data to our table which is used to build responsive pie chart in c#

So we use these data to generate responsive pie chart dynamically with Chartist-Js plugin.

# Add HTML Markup: Div tag to display chart where pie chart will display.

Our responsive chart gets to display in Div tag, so first we add a Div tag. Then we add a drop-down list as we want to show pie chart for selected year from this dropdown selected value, and a button.

On Button click event, we make a jQuery ajax call and then on its success method our responsive pie gets generated dynamically by using Chartist.js library.

Finally, this is how our HTML looks like as written below:

For better readability have modified default text color by adding below written CSS.

Note: You can override default CSS and set your own custom styling as per your needs.

# Server-side code: Create a WebService (WebMethod) which returns data.

Am assuming you are aware of creating Webservice and Webmethod. So first we add a WebService in our application .i.e ( myWebService.asmx file), and then we write our WebMethod which returns JSON format data.

Finally, this is how our WebMethod looks like where its returns variable p having  list object on cityPopulation class.

Note: To avoid SQL Injections, I always use parameterized query or using Storedproceudre at my work. Check what is sql injection and how to prevent it? Best practice would be to use parameterized query to perform CRUD operations instead simple sql statement

# Client-side code: code to initialize Chartist-js and binding data (jQuery ajax call).

Now we do our client side coding, we have already done with the server-side code by creating WebMethod which returns JSON format data.

So now in our Ajax call on success will initialize Chartist-js variable. Client-side code looks like as written below

For Creating Responsive Donut Chart, we need to set a simple property .i.e donut=true. Code to display Donut Chart looks like as written below.


 We are done, this is how our pie chart looks.

Donut Chart - responsive chartCreate Responsive chart in C#


Chartist-Js is an easy to use chart plugin and create responsive charts in our web application. In this article, we demonstrate with simple pie chart and donut chart, we can also create different kinds of charts like column, bar, line, area etc.

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! Thank you for reading


  1. Hi,

    Great tutorial about responsive charts. I have a doubt though… How to make a chart responsive when we are binding the data dynamically from database.


    • Hi Sajin,
      Thanks for visiting :).
      Well here in above code the Chart data already bind with the database (MS SQL server) .i.e dynamically data bind via a jquery ajax call and then responsive chart gets displayed

  2. Hi,

    Good tutorial, although I have one doubt. I am using a dynamic graph, and i want to make that graph responsive… How to do that???