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. Image for the cookie policy date
close icon



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,


1 Reply

DD Dharanidharan Dharmasivam Syncfusion Team 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 + "" + 
                   "yValue: " + sender.model._visibleSeries[seriesIndex]._visiblePoints[pointIndex].y+ "" + 
                    "seriesIndex: " + sender.data.region.SeriesIndex + "" + "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. 

Live Chat Icon For mobile
Up arrow icon