2D Chart for WinForms | ComponentOne
Chart for WinForms Quick Start / Step 4 of 4: Customize your Chart
In This Topic
    Step 4 of 4: Customize your Chart
    In This Topic

    In this section you'll learn how to make your chart more visually appealing and professional looking by using the built-in formatting effects.

    After finishing this tutorial your data bound chart will appear like the following:

    C1Chart formats the chart's back color as a control color and the plot area as a white color, but you can choose another color, use no color at all, or be creative and use two colors to create gradient effects.

    Change the color for the data series

    1. Right-click the C1Chart control and select Chart Properties.
    2. In the Chart Properties designer, select Data.
    3. In the ChartData tab, select each series from the Data Series group box and click on the Fill drop-down checkbox to choose a specific fill color.
    4. Select Simple for the fill type and set the colors for the Unit Price to PaleTurquoise, the Units in Stock to BlueViolet, and the Reorder Level to DeepPink.
    5. Click OK.

      Notice how the contrast between the light and dark colors in the series makes it easier to see the difference between the data series.

    To make more room for the data in the chart we can adjust the position of the chart legend.

    Modify the legend position

    1. Right-click the C1Chart control and select Chart Properties.
    2. In the Chart Properties designer, select Appearance>Legend.
    3. Click on the Position drop-down checkbox and select South.
    4. Click OK.

      This helps free up horizontal space so the chart looks more appealing and easily readable.

    To make the chart look less cluttered we can remove the horizontal gridlines since we only need the vertical gridlines to help us read the data.

    Remove the horizontal gridlines

    1. Right-click the C1Chart control and select Chart Properties.
    2. In the Chart Properties designer, select AxisX>Gridlines.
    3. In the Major grid group, uncheck Visible.

      The AxisX gridlines are removed from the chart.

    4. Click OK.

      To make the text stand out more in the chart you can change the chart's font style and color.

    Change the chart header's font style

    1. Right-click the C1Chart control and select Chart Properties.
    2. In the Chart Properties designer, select Appearance>Header.
    3. Click on the ForeColor drop-down listbox and select Black.
    4. Click on the Font button to open the Font dialog box. Change the font to Arial, its style to Bold, and its size to 10.
    5. Click OK.

      Next, we should change the chart's border color from control to black to make it consistent with the chart's text color.

    Change the chart's border color

    1. Right-click the C1Chart control and select Chart Properties.
    2. In the Chart Properties designer, select Appearance>ChartArea.
    3. In the Appearance [ChartArea] tab, click the Border drop-down checkbox and select Solid for the style, Black for the color, and 2 for the thickness.
    4. In the Appearance [PlotArea] tab, check Boxed.
    5. Click OK.

      To add some style to the chart, we can add some gradient fill effects to the entire chart.

    Add gradient fill effects to the chart

    1. Right-click the C1Chart control and select Chart Properties.
    2. In the Chart Properties designer, select Appearance>ChartArea.
    3. In the Appearance [ChartArea] tab, click the Fill drop-down checkbox and select the Gradient option. Several gradient options appear in the groupbox. Select the first gradient and choose White for Color1 and LightCyan for Color2, and then click OK.

    Run the application and observe the chart's new appearance.

    Congratulations, you have completed the C1Chart quick start! In this quick start you have learned how to:

    See Also