This sample illustrates how the drill down functionality of the chart can be used.

You need bind client-side click event to the chart. The javascript code:

var chartClientId = "#<%=C1BarChart1.ClientID%>";
$(document).ready(function () {
	var drawBrands = function (e, data) {
		$(chartClientId).c1barchart("option", "click", drawVersions);
		$(chartClientId).c1barchart("option", "seriesList", seriesList);

	var drawVersions = function (e, data) {
		var key = data.x, series = drillDwonData[key];
		$(chartClientId).c1barchart("option", "click", drawBrands);
		$(chartClientId).c1barchart("option", "seriesList", [series]);

	$(chartClientId).c1barchart("option", "click", drawVersions);

Test the features

  • Click on any column to see more details about the selected product.
  • In detailed view click on any column again to return back.
  • Note that percentage on 'y' axis changes according to chart values.