Share via

Tutorial: Creating a Basic Chart (Chart Controls)

  • Article

This tutorial demonstrates how to add the Chart control to your Windows Forms or Web application, and then add data, title, legends, and annotations to your chart.

Adding a Chart Control

Follow the steps below to add a chart control to your Windows Forms for Web application.

To add a chart control to your application

  1. In design view, open the Toolbox.

  2. From the Data category, drag a Chart control to the design area.

    If you cannot see the Chart control in the Toolbox, right click in the Toolbox, select Choose Items, and then select the following namespaces in the .NET Framekwork Components tab:

    Note

    To find the Chart control more easily in the Toolbox, hide the inactive controls. To do this, right-click the Toolbox, and clear Show All item.

  3. Right-click the Chart control in the design area and select Properties.

  4. In the Properties window, click the Categorized button.

  5. In the Chart category of the Properties window, click the ChartAreas collection property, and then click the ellipsis button (…). This opens the ChartAreas Collection Editor.

    The ChartAreas collection (a ChartAreaCollection object) contains all chart areas in the Chart control. Notice that the collection already contains a chart area named "ChartArea1".

  6. Click Add, and then click OK. A new ChartArea object is added to the collection with the default name "ChartArea2".

    Notice that the chart in the design area shrinks to half the original size. This is because the newly created chart area is placed at the bottom, but does not contain a data series yet.

  7. In the Properties window, click the Series collection, and then click the ellipsis button. This opens the Series Collection Editor.

    The Series collection (a SeriesCollection object) contains all data series in the Chart control. Notice that the collection already contains a series named "Series1".

  8. In the Series Collection Editor, click Add, and then set the following properties with the newly created Series object:

    Property Value

    ChartArea

    ChartArea2

    ChartType

    Bar

    Name

    BarChart

  9. Click OK, and then click OK again.

    Now there are chart areas, each chart area contains one data series. However, you will not see anything when you run your application because the series do not have any data yet.

Adding Data to the Chart

Follow the steps below to add data to the Chart control you just created.

To add data to the chart

  1. Open the Series Collection Editor again.

  2. In the Members area, select Series1.

  3. In the Data category of the Series1 properties area, click the Points collection property, and then click the ellipsis button. This opens the DataPoint Collection Editor.

    The Points collection (a DataPointCollection object) contains all data points in the current series.

  4. In the DataPoint Collection Editor, click Add, and then assign a value to the YValues property in the newly created DataPoint object.

    Repeat this step until you have five data points in the collection.

  5. Click OK, and then repeat the previous steps to add data points to the BarChart series.

  6. In the Series Collection Editor, click OK.

  7. Run your application.

    Now you can see two chart areas in the Chart control displaying the data points you just created in the two series. Note the different chart types of the two series.

Adding Legends to the Chart

Follow the steps below to add a legend for each series you just created.

To add a legend for each series

  1. In the Chart category of the Properties window, click the Legends collection property, and then click the … button at the right. This opens the Legend Collection Editor.

    The Legends collection (a LegendCollection object) contains all legends in the Chart control.

  2. If there is not already a legend in the Legend Collection Editor, click Add.

  3. Set the following properties with the Legend object:

    Property Value

    DockedToChartArea

    ChartArea1

    Docking

    Right

    IsDockedInsideChartArea

    False

  4. Click Add again, and then set the following properties with the newly created Legend object:

    Property Value

    DockedToChartArea

    ChartArea2

    Docking

    Right

  5. Click OK.

    Note that in the design area, the second legend is shown to be empty. By default, both series are assigned to the first legend. You can assign each series to a different legend.

  6. Open the Series Collection Editor again.

  7. In the Members area, select BarChart.

  8. In the Legend category of the BarChart properties area, in the Legend property's dropdown list, select Legend2.

  9. Click OK.

  10. Run your application.

Adding a Title to the Chart

Follow the steps below to add a title to your chart.

To add a title to the chart

  1. In the Chart category of the Properties window, click the Titles collection property, and then click the ellipsis button. This opens the Title Collection Editor.

    The Titles collection (a TitleCollection object) contains all titles in the Chart control.

  2. In the Legend Collection Editor, click Add.

  3. In the Appearance category of the Title1 properties area, type a chart title in the Text property.

  4. Click OK.

  5. Run your application.

Marking a Data Point with an Annotation

Follow the steps below to use an annotation to mark a data point on the chart.

To mark a data point with an annotation

  1. In the Chart category of the Properties window, click the Annotations collection property, and then click the ellipsis button. This opens the Annotation Collection Editor.

    The Annotations collection (an AnnotationCollection object) contains all annotations in the Chart control.

  2. In the Annotation Collection Editor, click the Add arrow and select ArrowAnnotation.

  3. In the Anchor category of the ArrowAnnotation1 properties area, click the AnchorDataPoint arrow and select the first data point in Series1.

  4. Set the following properties with the newly created Legend object:

    Property Value

    Height

    -5

    Width

    0

    AnchorOffSetY

    -2.5

  5. In the Misc category, expand the SmartLabelStyle property and set its IsOverlappedHidden property to False.

  6. Click OK.

  7. Run your application.

Next Step

You have now learned how to add the Chart control to your Windows Forms or Web application, and then add data, title, legends, and annotations to your chart. To learn how to use 3D charts, see Tutorial: Changing to a 3D Chart.

See Also

Reference

System.Windows.Forms.DataVisualization.Charting
System.Web.UI.DataVisualization.Charting

Other Resources

Getting Started
Using Chart Controls