Asp net chart add percentage next to the number

ASP.NET is a powerful programming language that allows developers to create dynamic web applications. One common requirement in web development is to display data in the form of charts. In this article, we will explore how to add a percentage next to the numbers in an ASP.NET chart.

To , let's assume we have a dataset that contains numerical representing categories. We want to display these values in a chart and also show the percentage next to each number.

First, we need to create a chart control in our ASP.NET application. We can do this by adding the following code to our ASP.NET page:


In the above code, we have created a chart control with a series of data points. Each data point represents a and its corresponding value. For simplicity, we have hardcoded the values, but in a real-world , these values be fetched from a database or some other data source.

Now, let's move on to adding the percentage next to each number in the chart. We can achieve this by handling the chart's `Customize` event. This event is fired for each data point in the chart, allowing us to customize its appearance.

 void Chart1_Customize(object sender, EventArgs e)
    foreach (var series in Chart1.Series)
        foreach (var point in series.Points)
            double value = point.YValues[0];
            double total = series.Points.Sum(p => p.YValues[0]);
            double percentage = (value / total) * 100;

            point.Label = $"{value} ({percentage:F2}%)";

In the above code, we iterate over each series and its data points. For each data point, we calculate the percentage by dividing its value by the total value of the series and multiplying it by 100. We then update the label of the data point to both the value and the percentage.

To wire up the `Customize` event, we need to add the following code to the `Page_Load` event handler:

protected void Page_Load(object sender, EventArgs e)
    Chart1.Customize += Chart1_Customize;

Now, when we run our ASP.NET application and view the chart, we will see the numbers along with their corresponding percentages.


In this article, we have explored how to add a percentage next to the numbers in an ASP.NET chart. By handling the chart's `Customize` event, we were able to calculate the percentage for each data point and update its label accordingly. This allows us to present the data in a more informative and visually appealing manner.

ASP.NET provides a wide range of charting capabilities, and with a little bit of customization, we can achieve the desired results. Whether it's adding percentages or any other customizations, ASP.NET empowers developers to create interactive and visually appealing charts for their web applications.

Rate this post

Leave a Reply

Your email address will not be published. Required fields are marked *

Table of Contents