Chart Series Pallet Colors

Thread is closed for posting
3 posts, 0 answers
  1. Craig
    Craig avatar
    20 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
  2. Giuseppe
    Admin
    Giuseppe avatar
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Craig
    Craig avatar
    20 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
Back to Top