Telerik UI for WinForms

This Quick Start tutorial is designed to have you quickly up and running with a working RadChart application. In the process of creating a basic bar chart you will be introduced to some of the features of RadChart.  You will populate the chart with static data and modify several properties that affect chart appearance.

Create a Windows Application

  1. From the Visual Studio File menu select New | Project.

  2. Select the "Windows Application" and enter a location path for the project.

    chart-getting-started-quick-start 001
  3. From the Toolbox drag a RadChart component to the form. The project should now look like the figure below.

    chart-getting-started-quick-start 002

Populate Chart Data

  1. Click the RadChart's SmartTag.

  2. From the SmartTag "Data" section, click the ellipses for the Chart Series Collection.

  3. Click "Series 1" in the members list on the left, then locate the Name property in the property window.

  4. Change the Name property to "Sales" and the DefaultLabelValue to "#ITEM". Name will be the series name that shows up in the legend. DefaultLabelValue will display the name of each item in the series instead of the item value.

  5. Locate the Items property in the property window.

  6. Click the ellipses button of the Items property to open the ChartSeriesItem Collection Editor.

  7. Click the Add button to add a new Item.

  8. In the property window for the new item, change the Name property to "Beverages".

  9. Change the YValue property to "10000".

    chart-getting-started-quick-start-create-a-bar-chart-with-simple-static-data 003
  10. Repeat the Add Item steps to add 3 new items.

  11. Replace the properties for the three new items as follows.:

    • Label=Produce, YValue =7500

    • Label=Poultry, YValue =9000

    • Label=Grains, YValue =11200

  12. Click OK to close the ChartSeriesItem Collection Editor.

  13. Click "Series 2" in the ChartSeries Collection Editor.

  14. Click the Remove button to remove Series 2.

  15. Click the OK button to close the ChartSeries Collection Editor.

  16. The chart will display the new data using the default formatting.

    chart-getting-started-quick-start-create-a-bar-chart-with-simple-static-data 004

Format the Chart Using the SmartTag

  1. Click the RadChart's Smart Tag

  2. Change the Layout section Height to 400px.

  3. In the Appearance section, change the Title Text entry to "Category Sales".

  4. The SmartTag options and resulting chart should look like the screen shot below.

    chart-getting-started-quick-start-create-a-bar-chart-with-simple-static-data 005

Format the Chart

  1. Click the Chart Wizard link at the bottom of the RadChart Tasks menu.

  2. Click the Axis Tab.

  3. Locate the Visual Properties section of the Axis tab.

  4. On the Select Axis drop down list select the X Axis. In the Axis Title entry enter "Product Categories". Uncheck Show Ticks to remove the tick marks from the bottom of the chart.

  5. On the Select Axis drop down list select the Y Axis. Uncheck Show Ticks to remove the tick marks on the left hand side of the chart.

    chart-getting-started-quick-start-create-a-bar-chart-with-simple-static-data 006
  6. Click the Labels, Legend and Title tab

  7. Locate the Legend section.

  8. Uncheck the Visible check box. This will remove the Sales legend from the right side of the graph

    chart-getting-started-quick-start-create-a-bar-chart-with-simple-static-data 007
  9. On the Skins tab select the Deep Blue skin.

    chart-getting-started-quick-start-create-a-bar-chart-with-simple-static-data 008
  10. Click the OK button to close the wizard.

  11. In the properties window, locate PlotArea.XAxis.AxisLabel.TextBlock.Visible and set it to "True".

    chart-getting-started-quick-start-create-a-bar-chart-with-simple-static-data 009

Run the application to view the finished chart. It should look like the screen shot shown below.

chart-getting-started-quick-start-create-a-bar-chart-with-simple-static-data 010