Chart Series Pallet Colors

[Craig]

Is there a list of system colors or css or template or cheat sheet that lists what the fill colors are for a given (Vista) series pallet?

I have two charts on the same page and on one of them I need to set the fill color programmatically. I figured this out and it works great. However, I need the colors to be similar to the other chart using the Office2007 skin and the Vista pallet colors for the series.

I would really like to get the list of main and secondary colors for each item in the "Vista" pallet. Is this available?

Thanks,
Craig

[Giuseppe]

Hello Craig,

Here is the xml snippet that contains the predefined series colors for the Vista theme (unfortunately there is no public chart API that would provide you with access to them so you would need to copy the colors manually):

<Chart SkinName="Vista">
  <Series>
    <ChartSeries>
      <Appearance>
        <Border Color="" />
        <TextAppearance>
          <TextProperties Color="89, 89, 89" />
        </TextAppearance>
        <FillStyle MainColor="186, 207, 141" SecondColor="146, 176, 83">
          <FillSettings GradientMode="Vertical">
            <ComplexGradient>
              <GradientElement Color="213, 247, 255" />
              <GradientElement Color="193, 239, 252" Position="0.5" />
              <GradientElement Color="157, 217, 238" Position="1" />
            </ComplexGradient>
          </FillSettings>
        </FillStyle>
      </Appearance>
    </ChartSeries>
    <ChartSeries>
      <Appearance>
        <Border Color="" />
        <TextAppearance>
          <TextProperties Color="89, 89, 89" />
        </TextAppearance>
        <FillStyle MainColor="235, 140, 104" SecondColor="214, 110, 90">
          <FillSettings GradientMode="Vertical">
            <ComplexGradient>
              <GradientElement Color="218, 254, 122" />
              <GradientElement Color="198, 244, 80" Position="0.5" />
              <GradientElement Color="153, 205, 46" Position="1" />
            </ComplexGradient>
          </FillSettings>
        </FillStyle>
      </Appearance>
    </ChartSeries>
    <ChartSeries>
      <Appearance>
        <Border Color="" />
        <TextAppearance>
          <TextProperties Color="89, 89, 89" />
        </TextAppearance>
        <FillStyle MainColor="129, 192, 225" SecondColor="79, 129, 189">
          <FillSettings GradientMode="Vertical">
            <ComplexGradient>
              <GradientElement Color="136, 221, 246" />
              <GradientElement Color="97, 203, 234" Position="0.5" />
              <GradientElement Color="59, 161, 197" Position="1" />
            </ComplexGradient>
          </FillSettings>
        </FillStyle>
      </Appearance>
    </ChartSeries>
    <ChartSeries>
      <Appearance>
        <Border Color="" />
        <TextAppearance>
          <TextProperties Color="89, 89, 89" />
        </TextAppearance>
        <FillStyle MainColor="200, 182, 80" SecondColor="176, 162, 83">
          <FillSettings GradientMode="Vertical">
            <ComplexGradient>
              <GradientElement Color="163, 222, 78" />
              <GradientElement Color="132, 207, 27" Position="0.5" />
              <GradientElement Color="102, 181, 3" Position="1" />
            </ComplexGradient>
          </FillSettings>
        </FillStyle>
      </Appearance>
    </ChartSeries>
    <ChartSeries>
      <Appearance>
        <Border Color="" />
        <TextAppearance>
          <TextProperties Color="89, 89, 89" />
        </TextAppearance>
        <FillStyle MainColor="171, 62, 29" SecondColor="115, 36, 12">
          <FillSettings GradientMode="Vertical">
            <ComplexGradient>
              <GradientElement Color="79, 152, 198" />
              <GradientElement Color="34, 123, 182" Position="0.5" />
              <GradientElement Color="4, 85, 156" Position="1" />
            </ComplexGradient>
          </FillSettings>
        </FillStyle>
      </Appearance>
    </ChartSeries>
    <ChartSeries>
      <Appearance>
        <Border Color="" />
        <TextAppearance>
          <TextProperties Color="89, 89, 89" />
        </TextAppearance>
        <FillStyle MainColor="156, 121, 182" SecondColor="127, 91, 154">
          <FillSettings GradientMode="Vertical">
            <ComplexGradient>
              <GradientElement Color="86, 153, 78" />
              <GradientElement Color="43, 126, 33" Position="0.5" />
              <GradientElement Color="18, 96, 3" Position="1" />
            </ComplexGradient>
          </FillSettings>
        </FillStyle>
      </Appearance>
    </ChartSeries>
    <ChartSeries>
      <Appearance>
        <Border Color="" />
        <TextAppearance>
          <TextProperties Color="89, 89, 89" />
        </TextAppearance>
        <FillStyle MainColor="186, 207, 141" SecondColor="146, 176, 83">
          <FillSettings GradientMode="Vertical">
            <ComplexGradient>
              <GradientElement Color="213, 247, 255" />
              <GradientElement Color="193, 239, 252" Position="0.5" />
              <GradientElement Color="157, 217, 238" Position="1" />
            </ComplexGradient>
          </FillSettings>
        </FillStyle>
      </Appearance>
    </ChartSeries>
  </Series>
  <Appearance Corners="Round, Round, Round, Round, 7">
    <FillStyle FillType="ComplexGradient">
      <FillSettings>
        <ComplexGradient>
          <GradientElement Color="243, 253, 255" />
          <GradientElement Color="White" Position="0.5" />
          <GradientElement Color="243, 253, 255" Position="1" />
        </ComplexGradient>
      </FillSettings>
    </FillStyle>
    <Border Color="212, 221, 222" />
  </Appearance>
  <ChartTitle>
    <TextBlock>
      <Appearance>
        <TextProperties Color="86, 88, 89" Font="Verdana, 22px" />
      </Appearance>
    </TextBlock>
    <Appearance>
      <FillStyle MainColor="" />
      <Dimensions Margins="3%, 1px, 1px, 6%" />
      <Border Visible="False" />
    </Appearance>
  </ChartTitle>
  <Legend>
    <TextBlock>
      <Appearance>
        <TextProperties Color="86, 88, 89" />
        <Position AlignedPosition="Top" />
      </Appearance>
    </TextBlock>
    <Appearance>
      <Dimensions Margins="1px, 1%, 10%, 1px" />
      <Border Color="" />
      <ItemTextAppearance>
        <TextProperties Color="86, 88, 89" />
      </ItemTextAppearance>
      <FillStyle MainColor="" />
      <ItemMarkerAppearance Figure="Rectangle" />
    </Appearance>
  </Legend>
  <PlotArea>
    <Appearance>
      <FillStyle MainColor="Transparent" SecondColor="Transparent" />
      <Dimensions Margins="19%, 90px, 12%, 9%" />
      <Border Color="WhiteSmoke" />
    </Appearance>
    <YAxis>
      <Appearance Color="134, 134, 134">
        <MinorTick Color="196, 196, 196" />
        <TextAppearance>
          <TextProperties Color="89, 89, 89" />
        </TextAppearance>
        <MajorGridLines Color="196, 196, 196" />
        <MajorTick Color="196, 196, 196" />
        <MinorGridLines Color="196, 196, 196" Width="0" />
      </Appearance>
      <AxisLabel>
        <TextBlock>
          <Appearance>
            <TextProperties Color="220, 158, 119" />
          </Appearance>
        </TextBlock>
      </AxisLabel>
    </YAxis>
    <XAxis>
      <Appearance Color="134, 134, 134">
        <TextAppearance>
          <TextProperties Color="89, 89, 89" />
        </TextAppearance>
        <MajorGridLines Color="196, 196, 196" Width="0" />
        <MajorTick Color="134, 134, 134" />
      </Appearance>
      <AxisLabel>
        <TextBlock>
          <Appearance>
            <TextProperties Color="51, 51, 51" />
          </Appearance>
        </TextBlock>
        <Appearance>
          <Dimensions Paddings="1px, 1px, 10%, 1px" />
        </Appearance>
      </AxisLabel>
    </XAxis>
  </PlotArea>
</Chart>

Hope this helps.


All the best,
Giuseppe
the Telerik team

[Craig]

Giuseppe,
Thanks for the list it really helped. I have used these colors and the charts look great!

Green = <FillStyleMainColor="186, 207, 141"SecondColor="146, 176, 83">
Orange = <FillStyleMainColor="235, 140, 104"SecondColor="214, 110, 90">
Blue = <FillStyleMainColor="129, 192, 225"SecondColor="79, 129, 189">
Yellow = <FillStyleMainColor="200, 182, 80"SecondColor="176, 162, 83">
Red = <FillStyleMainColor="171, 62, 29"SecondColor="115, 36, 12">
Purple = <FillStyleMainColor="156, 121, 182"SecondColor="127, 91, 154">

Craig