In this blog post we will look on how to build a bar chart with multiple series, custom X-labels and inner labels using MindFusion.Charting for ASP.NET control.

1. General Appearance of the Chart

We want to show three data series and we want to show the first values of each series in a cluster, then second cluster with the second values of each series etc. In order to render the bars in this order we set the BarType property to BarType.Clustered3D. We correct the Depth3D to make the bars less thick and increase the distance between each series with DistBtwBars. We make the bars wider, setting BarWidth to 30.

    //general appearance
    BarChart1.BarType = MindFusion.Charting.BarType.Clustered3D;
    BarChart1.BarWidth = 30f;        
    BarChart1.Depth3D = 15f;
    BarChart1.DistBtwBars = 10f;

2. Grid

Our bars are vertical e.g. it is a column chart, so we would like to have a horizontal grid. We set the GridType property to GridType.HorScale and we set the AltGridBrush and GridBruh to different gray colors to give us nice alternating grid stripes. For the outlining of the whole plot area we use the PlotAreaOutlinePen.

    //grid settings
    BarChart1.GridBrush= new MindFusion.Drawing.SolidBrush(System.Drawing.Color.FromArgb(242, 239, 224));
    BarChart1.GridPen= new MindFusion.Drawing.Pen(System.Drawing.Color.FromArgb(204, 196, 185));
    BarChart1.GridType = MindFusion.Charting.GridType.HorScale;
    BarChart1.PlotAreaOutlinePen = new MindFusion.Drawing.Pen(System.Drawing.Color.FromArgb(204, 196, 185));

3. Labels Inside Bars

The labels inside bars show the data of each bar – this is done by setting the InnerLabelType property to LabelType.Data. We use a white LabelBrush to draw the labels and set their InnerLabelBorder to Border.RoundedRect. The background of the inner labels is set to gray.

    //inner labels settings
    BarChart1.InnerLabelBackground = new MindFusion.Drawing.SolidBrush(System.Drawing.Color.FromArgb(112, 128, 144));
    BarChart1.InnerLabelBorder = MindFusion.Charting.Border.RoundedRect;
    BarChart1.InnerLabelType = MindFusion.Charting.LabelType.Data; 
    BarChart1.LabelBrush = new MindFusion.Drawing.SolidBrush(System.Drawing.Color.FromArgb(255, 255, 255));

4. Title

We want not only title but also second title – or a subtitle. That’s why we use both the TitleText and SubTitleText properties. We leave no distance between them – we set SubTitleOffset to 0. But we would like the two titles to be well above the plot area, that’s why we set bigger TitleOffset.

    //title and subtitle
    BarChart1.SubTitleOffset = 30;
    BarChart1.SubTitleText = "all major continents";
    BarChart1.TitleOffset = 0;
    BarChart1.TitleText = "Sales";

5. Labels at the Axes

The X-labels are custom text – we set them with XLabels. The title of the Y-axis is rotated, so we use LabelOrientation.BottomToTop.

    //axes labels settings
    BarChart1.XAxisSettings.LabelSeriesIndex = 1;
    BarChart1.XLabels.Clear();
    BarChart1.XLabels.Add(new List(){ "Europe", "Asia", "North America", "South America"});
    
    BarChart1.YAxisSettings.TitleLabel = "in mlns. USD";
    BarChart1.YAxisSettings.TitleLabelOrientation = MindFusion.Charting.LabelOrientation.BottomToTop;

Here is a screenshot of the final chart:

ASP.NET Bar Chart with Custom Labels

The sample can be downloaded from here:

Download ASP.NET Bar Chart with Labels Sample

The trial version of MindFusion.Charting for ASP.NET can be downloaded directly from the link below. It contains many more samples and tutorials:

Download MindFusion.Charting for WebForms Trial Version

About MindFusion.Charting for WebForms: A powerful WebForms control that lets programmers add compelling charts in any ASP.NET application. With the component you can design and create any bar, column, line, area, scatter, bubble, radar, polar, doughnut and pie chart. Its elegant API includes data binding, themes, hit-testing, zoom, drill-down, wizards and many more.

The control takes advantage of the rich capabilities of Microsoft WebForms but its functionality does not bring excess complexity. The API is very easy to understand, all the features are duly documented. Numerous samples and step-by-step tutorials let you learn quickly how to tailor the tool in order to meet best your needs.

Details about the various features of the control are provided here. The online demo will give you an overview of the control’s rich capabilities. Licenses, prices and discounts are listed at the buy page.