ASP.NET MVC 5 - Customizing Pie Chart Using JavaScript C3 Chart Library

Introduction

 

In my previous article, we discussed how to generate a C3 Pie Chart in our ASP.NET MVC5 web application with JSON data using Entity Framework. Now, let us discuss different ways of customization on a Pie Chart using C3 Chart JavaScript Library. The result from the previous article is below,

 

 

 

Now, let's move forward to do customization on the pie chart.

 

Customization 

 

Legend

 

A legend is displayed on the bottom of the pie chart. In the above image, you can see that the legends are displayed as India, UK, and the US. Now, we will try to change the legend position. C3 Chart supports 3 type of positions, such as bottom, right, and inset. Now, we will see how to mention the legend type. By default, the legend position is at the bottom.

legend: {
   position: 'right'
},

 

 

Now, let's hide those(India, Uk, and Us) legends. By default, the legend is enabled on every chart and the value is true. Let's change it to "False" to hide the legend from the respective chart.

legend: {
    show: false,
},

Now, the legends are hidden in the below image.

 

  

Tooltip

 

In the first image, we can see that we are getting the tooltip on each country portion. During hover, it gives the country name and population. Now, we will try to add the country as a caption. So, let's add the title for the tooltip as below,

tooltip: {
        format: {
            title: function(x) {
                return 'Country ';
            }
        }

The title will be common for every tooltip on our pie chart. If we wanted to show a unique title on every tooltip, we can write that over here.

 

 

 

Interaction

 

We should set true when we want to do some interaction with the chart. If false is set, all of the interactions (showing/hiding tooltip, selection and all kind of events on charts) will be disabled.

 

 

 

Label 

 

In the pie chart, a label is in disabled by default. And now we will change the pie chart label format. Here, I am going to convert it as the number and $(dollar) format.

pie: {
    label: {
        show: true,
        format: function(value, ratio, id) {
            return d3.format('$')(value);
        }
    }
},

 

 

Chart type

 

Sometime we will be in the position to change the existing chart layout. Just assume one client asks us to change this pie chart to a donut chart. In this situation, we can easily achieve it without more effort like below,

 

type: 'pie',=> type: 'donut', 

 

 

 

You can see that the above chart has been changed from pie to donut.

 

Complete View 

@ {
    ViewBag.Title = "Index";
} < h2 style = "position:center" > Pie Chart < /h2> < div id = "pieChart" > < /div> < script type = "text/javascript" > $(document).ready(function() {
    var MSiteName = [];
    var MasterJson;
    $.ajax({
        type: "GET",
        url: "/Chart/BarChart",
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            successFunc(response);
        },
    });

    function successFunc(jsondata) {
        var data = {};
        var countryNames = [];
        jsondata.forEach(function(e) {
            countryNames.push(e.CountryName);
            data[e.CountryName] = e.CountryPopulation;
        })
        var chart = c3.generate({
            bindto: '#pieChart',
            data: {
                json: [data],
                keys: {
                    value: countryNames,
                },
                type: 'donut',
            },
            legend: {
                show: true,
                position: 'right'
            },
            tooltip: {
                format: {
                    title: function(x) {
                        return 'Country ';
                    }
                }
            },
            interaction: {
                enabled: false
            },
            pie: {
                label: {
                    show: true,
                    format: function(value, ratio, id) {
                        return d3.format('$')(value);
                    }
                }
            },
            color: {
                pattern: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
            },
        });
    }
}); < /script>

Complete Controller 

using Piechart.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Piechart.Controllers {
    public class ChartController: Controller {
        // GET: Chart
        public ActionResult Index() {
            return View();
        }
        public ActionResult BarChart() {
            CSharpCornerEntities entities = new CSharpCornerEntities();
            return Json(entities.Countries.ToList(), JsonRequestBehavior.AllowGet);
        }
    }
}

Refer to the attached project for reference and I did attach the demonstrated project without a package due to the size limit. 

 

Summary

 

In this article, we have seen the different way of customization on the pie chart using C3 Chart JavaScript library and chart transmission.

 

I hope you enjoyed this article. Your valuable feedback and comments about this article are always welcome.