To generate a column chart, simply create a 'ColumnChart' control on your page as follows:

<highchart:columnchart id="hcFrutas" width="600" height="400" runat="server"></highchart:columnchart>

And then add the axis and bind the dataset/collection.

//Title configuration
hcFrutas.Title = new Title("Consumo de Frutas");
hcFrutas.SubTitle = new SubTitle("Agrupados por tipo de fruta");

//Defining Axis
hcFrutas.YAxis.Add(new YAxisItem { title = new Title("Unidades") });
hcFrutas.XAxis.Add( new XAxisItem { categories = new[] { "Macas", "Laranjas", "Peras", "Bananas", "Uvas" } });
//data
var series = new Collection<serie>();
series.Add(new Serie { name = "Andre", data = new object[] { 4, 15, 5, 17, 14 } });
series.Add(new Serie { name = "Ivan", data = new object[] { 4, 25, 6, 12, 6 } });
series.Add(new Serie { name = "Marina", data = new object[] { 7, 19, 2, 34, 5 } });
series.Add(new Serie { name = "Camila", data = new object[] { 3, 14, 6, 21, 9 } });
//configuring Visual
hcFrutas.PlotOptions = new Core.PlotOptions.PlotOptionsColumn { borderColor = "#dedede", borderRadius = 4 };
//bind
hcFrutas.DataSource = series;
hcFrutas.DataBind();

That's all! Just build and run your web application! The result should be like this:

image

Click to see a working column chart created by Highcharts .Net :  http://highcharts.paulovich.com.br/Sample02.aspx

Return to Index

Last edited Jan 18, 2012 at 8:01 PM by alrcastro, version 10

Comments

BaldiChile Jun 20, 2016 at 2:41 PM 
How you can add another axis ?

ashish_mundra Apr 27, 2011 at 12:18 PM 
I used this and it works fine.. But I also have a submit button on my asp.net page. On click, the chart becomes blank whereas I am rebinding the control.

Please help!