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<\/a> property to BarType.Clustered3D<\/a>. We correct the Depth3D<\/a> to make the bars less thick and increase the distance between each series with DistBtwBars<\/a>. We make the bars wider, setting BarWidth<\/a> to 30.<\/p>\n 2. Grid<\/strong><\/p>\n Our bars are vertical e.g. it is a column chart, so we would like to have a horizontal grid. We set the GridType<\/a> property to GridType.HorScale<\/a> and we set the AltGridBrush<\/a> and GridBruh<\/a> to different gray colors to give us nice alternating grid stripes. For the outlining of the whole plot area we use the PlotAreaOutlinePen<\/a>.<\/p>\n 3. Labels Inside Bars<\/strong><\/p>\n The labels inside bars show the data of each bar – this is done by setting the InnerLabelType<\/a> property to LabelType.Data<\/a>. We use a white LabelBrush<\/a> to draw the labels and set their InnerLabelBorder<\/a> to Border.RoundedRect<\/a>. The background of the inner labels is set to gray.<\/p>\n 4. Title<\/strong><\/p>\n We want not only title but also second title – or a subtitle. That’s why we use both the TitleText<\/a> and SubTitleText<\/a> properties. We leave no distance between them – we set SubTitleOffset<\/a> to 0. But we would like the two titles to be well above the plot area, that’s why we set bigger TitleOffset<\/a>.<\/p>\n 5. Labels at the Axes<\/strong><\/p>\n The X-labels are custom text – we set them with XLabels<\/a>. The title of the Y-axis is rotated, so we use LabelOrientation.BottomToTop<\/a>.<\/p>\n Here is a screenshot of the final chart:<\/p>\n ASP.NET Bar Chart with Custom Labels<\/p><\/div>\n The sample can be downloaded from here:<\/p>\n Download ASP.NET Bar Chart with Labels Sample<\/a><\/p>\n The trial version of MindFusion.Charting for ASP.NET can be downloaded directly from the link below. It contains many more samples and tutorials:<\/p>\n Download MindFusion.Charting for WebForms Trial Version<\/a><\/p>\n About MindFusion.Charting for WebForms:<\/em> 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.<\/p>\n 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.<\/p>\n Details about the various features of the control are provided here.<\/a> The online demo<\/a> will give you an overview of the control’s rich capabilities. Licenses, prices and discounts are listed at the buy page.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" 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 … Continue reading \/\/general appearance\n BarChart1.BarType = MindFusion.Charting.BarType.Clustered3D;\n BarChart1.BarWidth = 30f; \n BarChart1.Depth3D = 15f;\n BarChart1.DistBtwBars = 10f;\n<\/pre>\n
\/\/grid settings\n BarChart1.GridBrush= new MindFusion.Drawing.SolidBrush(System.Drawing.Color.FromArgb(242, 239, 224));\n BarChart1.GridPen= new MindFusion.Drawing.Pen(System.Drawing.Color.FromArgb(204, 196, 185));\n BarChart1.GridType = MindFusion.Charting.GridType.HorScale;\n BarChart1.PlotAreaOutlinePen = new MindFusion.Drawing.Pen(System.Drawing.Color.FromArgb(204, 196, 185));\n<\/pre>\n
\/\/inner labels settings\n BarChart1.InnerLabelBackground = new MindFusion.Drawing.SolidBrush(System.Drawing.Color.FromArgb(112, 128, 144));\n BarChart1.InnerLabelBorder = MindFusion.Charting.Border.RoundedRect;\n BarChart1.InnerLabelType = MindFusion.Charting.LabelType.Data; \n BarChart1.LabelBrush = new MindFusion.Drawing.SolidBrush(System.Drawing.Color.FromArgb(255, 255, 255));\n<\/pre>\n
\/\/title and subtitle\n BarChart1.SubTitleOffset = 30;\n BarChart1.SubTitleText = \"all major continents\";\n BarChart1.TitleOffset = 0;\n BarChart1.TitleText = \"Sales\";\n<\/pre>\n
\/\/axes labels settings\n BarChart1.XAxisSettings.LabelSeriesIndex = 1;\n BarChart1.XLabels.Clear();\n BarChart1.XLabels.Add(new List(){ \"Europe\", \"Asia\", \"North America\", \"South America\"});\n \n BarChart1.YAxisSettings.TitleLabel = \"in mlns. USD\";\n BarChart1.YAxisSettings.TitleLabelOrientation = MindFusion.Charting.LabelOrientation.BottomToTop;\n<\/pre>\n![\"ASP.NET](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/09\/asp_bar_chart_with_labels.png\")
<\/a>