Micro-Chart control included with DotNetBar for Windows Forms is designed as a super fast chart control that can be included in menus, toolbars and Ribbon controls. They are used to provide fast, context based and data rich information in small amount of space and are not designed to replace standard charts.

Chart types included are:

Plot:

Win/Lose:

Area:

Line:

Column:

Bar:

Pie:

100% Bar:

Chart-type is specified using ChartType property.

Chart Data

Chart-data is set using DataPoints property which is of List<double> type. Here is code that shows creation of the chart and setting its data:

C#:

MicroChartItem microChart = new MicroChartItem();
microChart.DataPoints = new List(new double[] { 10, 40, 30, 20, 80, 34 });
microChart.Text = "Profit: ";
microChart.ChartType = eMicroChartType.Line;
microChart.TextPosition = eMicroChartTextPosition.Left;
container1.SubItems.Add(microChart);

VB:

Dim microChart As New MicroChartItem()
microChart.DataPoints = New List(Of Double)(New Double() { 10, 40, 30, 20, 80, 34 })
microChart.Text = "Profit: "
microChart.ChartType = eMicroChartType.Line
microChart.TextPosition = eMicroChartTextPosition.Left
container1.SubItems.Add(microChart)

When updating data it is recommended to set DataPoints property instead of adding to its collection since that will automatically update the chart and it will also provide smooth animated transition. If you add data directly to DataPoints collection, for example, microChart.DataPoints.Add(40), then after you are done adding data you will need to call InvalidateChart method and specify whether you want animated transition to be performed. Note that you do not need to call InvalidateChart method if you are setting DataPoints collection with new instance of data collection. AnimationEnabled property controls whether chart transition animation is performed.

Chart Tooltips

Micro-chart control will automatically generate tooltips for data points on charts. The tooltip will simply be a value of data point. First way to customize tooltips is by setting TooltipValueFormatString property. For example setting: microChart.TooltipValueFormatString = “C” will cause the tooltips value to be formatted as local currency. You can also use more complex format like: microChartItem3.TooltipValueFormatString = “Profit custom format: #0” which will cause tooltip to display text with numeric value. The formats that you can use are standard Numeric Formats.

Second way to customize tooltips is to provide custom tooltip for each data value. This means that you provide as many tooltips as there are data values in DataPoints collection. For example this sets custom tooltips for chart that displays only two values:

C#:

microChart.DataPoints = new List(new double[] { 20, 80 });
microChart.DataPointTooltips = new List(new string[] { "Competitors: {0}", "Our market share: {0}" });

VB:

microChart.DataPoints = New List(New Double() { 20, 80 })
microChart.DataPointTooltips = New List(Of String)(New String() { "Competitors: {0}", "Our market share: {0}" })

Data point tooltips can be disabled by setting TrackChartPoints property to false.

Appearance Customization

MicroChartItem chart size can be changed by setting ChartWidth and ChartHeight properties. If TextVisible property is set to true the Text will be displayed at position specified by TextPosition property.

MouseOverEnabled property specifies whether whole micro-chart item is highlighted, just like button, when mouse is over the item.

Each chart-type has associated style property that controls appearance of that chart. Following styling properties are provided: AreaChartStyle, BarChartStyle, ColumnChartStyle, HundredPctChartStyle, LineChartStyle, PieChartStyle, PlotChartStyle, WinLoseChartStyle.

For example here is how to customize line chart type using its style object:

C#:

microChart1.LineChartStyle.FirstPointColor = Color.Green;
microChart1.LineChartStyle.LastPointColor = Color.DarkRed;
microChart1.LineChartStyle.DrawZeroLine = false;
microChart1.LineChartStyle.HighPointColor = Color.Blue;
microChart1.LineChartStyle.LowPointColor = Color.Red;

VB:

microChart1.LineChartStyle.FirstPointColor = Color.Green
microChart1.LineChartStyle.LastPointColor = Color.DarkRed
microChart1.LineChartStyle.DrawZeroLine = False
microChart1.LineChartStyle.HighPointColor = Color.Blue
microChart1.LineChartStyle.LowPointColor = Color.Red

Related posts:

  1. WinForms Schedule Control Quick Start Guide
  2. ComboTree Quick Start Guide
  3. SuperGrid Quick Start Guide
  4. How to use ItemPanel Data-Binding Features – WinForms
  5. Tabbed User Interface Quick Start Guide