We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


Thread ID:





128997 Feb 20,2017 09:54 PM UTC Feb 21,2017 12:14 PM UTC ASP.NET MVC 1
Tags: Chart
Laura Jordan
Asked On February 20, 2017 09:54 PM UTC


I am using the Chart/Column control and I want to open a detail view when the user clicks each bar, can you help me with that? I also need to format the Y axis as currency format, there is any way to do this?

Really appreciate the support,


Dharanidharan Dharmasivam [Syncfusion]
Replied On February 21, 2017 12:14 PM UTC

Hi Laura, 

Thanks for using Syncfusion product. 

Query #1: I want to open a detail view when the user clicks each bar 
Response: Your requirement can be achieved as work around by using PointRegionClick event. This event will be triggered, when clicked on point in the series and you can set the chart model, point index, series index, x value and y value of the clicked point. We have displayed this in the alert box. 

And also we have performed drilldown action while clicking on the point. On drilldown chart with new data points will be show. Find the code snippet below. 
function onclick(sender) { 
var seriesIndex = sender.data.region.SeriesIndex; 
        var pointIndex = sender.data.region.Region.PointIndex; 
        alert("xValue: " + sender.model._visibleSeries[seriesIndex]._visiblePoints[pointIndex].x + "\n" + 
                   "yValue: " + sender.model._visibleSeries[seriesIndex]._visiblePoints[pointIndex].y+ "\n" + 
                    "seriesIndex: " + sender.data.region.SeriesIndex + "\n" + "pointIndex: " +  
        document.getElementById("text").innerHTML = sender.model._visibleSeries[0]._visiblePoints[pointIndex].x; 
        if (sender.model.series[0].name == "Market") 
            $("#container").ejChart("option", { "drilldown": pieSeries(pointIndex) }); 
        document.getElementById("symbol").style.visibility = "visible";    } 
function pieSeries(index) { 
        if (index == 0) { 
            return { 
                title: { text: 'Automobile Sales in the SUV segment' }, 
                series: [{ 
                    points: [{ x: "Toyota", y: 8 }, { x: "Ford", y: 12 }, 
                             { x: "GM", y: 17}, { x: "Renault", y: 6}, 
                             { x: "Fiat", y: 3}, { x: "Hyundai", y: 16 }, 
                             { x: "Honda", y: 8 }, { x: "Maruthi", y: 10 }, 
                             { x: "BMW", y: 20 } 
                    name: 'SUV-Sale', labelPosition: 'outside', enableAnimation: true, 
                    marker: { 
                        dataLabel: { visible: true, connectorLine: { height: 40 }, font: { size: '12px', color: "#707070" } } 
                legend: { visible: false } 

After Drilldown(1st bar): 


To return back to the original chart, click on the Sales by Category as mentioned in the above screenshot(Red coclored rectangle). 

Query #2:  I also need to format the Y axis as currency format 
Response: Your requirement can be achieved by using any of the below methods. 
Method 1: 
By using LabelFormat property in the primaryYAxis, you can achieve this. When c is specified, the number will be displayed in currency format based on the culture. By default, it will be displayed in dollar currency format, since the default culture is en-us. Find the code snippet below. 


Screenshot for labelFormat(“c”): 
Method 2:  
You can also achieve your requirement by using regular expression to perform string operations. Find the below code snippet. 

axesLabelRendering: "axesLabels" 
function axesLabels(sender) { 
                  if (sender.data.axis.orientation == "vertical") { 
                      var text = sender.data.label.Text.toString(); 
                      sender.data.label.Text = "£" + text.replace(/\B(?=(\d{3})+(?!\d))/g, ","); 

We have attached the sample, for your reference which can be downloaded from below link. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon