Telerik Forums / UI for ASP.NET AJAX Forum / Chart (Obsolete) /

Chart Series Pallet Colors

Telerik UI for ASP.NET AJAX
Resources Buy Try

Thread is closed for posting

3 posts, 0 answers

Craig

24 posts

Member since:
Aug 2006

Posted 08 Dec 2011 Link to this post

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
Admin

2363 posts

Posted 13 Dec 2011 Link to this post

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Craig

24 posts

Member since:
Aug 2006

Posted 13 Dec 2011 Link to this post

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

Chart Series Pallet Colors

Craig

Giuseppe

Craig