Step 3 of 4: Customizing the CandlestickChart

In This Topic

In this topic you will customize the axis annotation.

Click the C1CandlestickChart's smart tag again and select the Series Styles option from the CandlestickChart Tasks Menu. The Candlestick Chart Style Collection Editor will open.
Click Add to create a CandlestickChartStyle Series in the right-hand pane of the collection editor. There will be six style options in the left-hand pane:

Select the Close property and open the options by clicking the drop-down arrow. There are many options available that allow you to customize the look of your C1CandlestickChart. For this Quick Start, you'll focus on the Fill properties. Click the drop-down arrow next to the Fill property.
Locate the Color property in the list. You can either enter a color name, or you can click the ellipses button to open the More Colors dialog box and select a color.
Locate the Width property and enter a numeric value for the width.
Repeat the steps above for the rest of the Style option properties, and then click OK to add the styles to your control. The added markup will resemble the following:

Markup	Copy Code
<CandlestickChartSeriesStyles> <cc1:CandlestickChartStyle> <HighLow Width="6"> <Fill Color="#339933"></Fill> </HighLow> <Open Width="10"> <Fill Color="#99CCFF"></Fill> </Open> <Close Width="5"> <Fill Color="Blue"></Fill> </Close> <FallingClose Width="9"> <Fill Color="Fuchsia"></Fill> </FallingClose> <RaisingClose Width="8"> <Fill Color="#660066"></Fill> </RaisingClose> <UnchangeClose Width="4"> <Fill Color="#336600"></Fill> </UnchangeClose> </cc1CandlestickChartStyle> </CandlestickChartSeriesStyles>

Markup

Copy Code

<CandlestickChartSeriesStyles>
    <cc1:CandlestickChartStyle>
        <HighLow Width="6">
            <Fill Color="#339933"></Fill>
        </HighLow>
        <Open Width="10">
            <Fill Color="#99CCFF"></Fill>
        </Open>
        <Close Width="5">
            <Fill Color="Blue"></Fill>
        </Close>
        <FallingClose Width="9">
            <Fill Color="Fuchsia"></Fill>
        </FallingClose>
        <RaisingClose Width="8">
            <Fill Color="#660066"></Fill>
        </RaisingClose>
        <UnchangeClose Width="4">
            <Fill Color="#336600"></Fill>
        </UnchangeClose>
    </cc1CandlestickChartStyle>
</CandlestickChartSeriesStyles>

If you're not already in Source View, switch to that view. Add the following markup just above your closing </cc1 C1CandlestickChart> tag. This markup will change the appearance of your chart's axes:

Markup	Copy Code
<Axis> <X> <GridMajor Visible="True"></GridMajor> <GridMinor Visible="True"></GridMinor> <TickMajor Position="Cross"> </TickMajor> </X> <Y Visible="False" Compass="West"> <Labels TextAlign="Center"></Labels> <GridMajor Visible="True"></GridMajor> <GridMinor Visible="False"></GridMinor> </Y> </Axis>

Markup

Copy Code

<Axis>
    <X>
        <GridMajor Visible="True"></GridMajor>
        <GridMinor Visible="True"></GridMinor>
        <TickMajor Position="Cross">
        </TickMajor>
    </X>
    <Y Visible="False" Compass="West">
        <Labels TextAlign="Center"></Labels>
        <GridMajor Visible="True"></GridMajor>
        <GridMinor Visible="False"></GridMinor>
    </Y>
</Axis>

In this topic, you used both the Candlestick Chart Style Collection Editor and adding markup to customize your C1CandlestickChart control. In the next step, you'll run your project.