Pie charts

Your our eyes only

These pages are for our eyes only and should not be shared with customers.

Use only when necessary

For some websites they may only be appropriate for New articles and Newsletters

Check headings!

Once applied, manually update headings in alignment with the headings sequence of the destination

Version 1

  • deepskyblue 3%
  • dodgerblue 10%
  • cornflowerblue 62%
  • lightskyblue 25%

Version 2

  • deepskyblue 3%
  • dodgerblue 10%
  • cornflowerblue 62%
  • lightskyblue 25%

Accessibility

Data

To ensure accessibility all the values will be required and included in conjuction with the pie chart. We may have to ask for this information to be supplied if it is not clear within the format provided.

Layout

The pie is not responsive, so whilst they are shown in two columns on this page within a card, they will overflow the card on some screen sizes. It maybe best to apply them only in 1 column or as appropriate to the content.

Calculating segment sizes

There are notes within the media items to help with this 'hack' to display pie chart data using a Conic Gradient and CSS Colours and thanks to Jack we have some colour palettes ready to use.

Code example: 4 segments

style="background: conic-gradient([Colour of 1st slice] 0deg, [Colour of 1st slice] [End of the 1st slice]deg, [Colour of 2nd slice] [Start of the 2nd slice]deg, [Colour of 2nd slice] [End of the 2nd slice]deg, [Colour of 3rd slice] [Start of the 3rd slice]deg, [Colour of 3rd slice] [End of the 3rd slice]deg, [Colour of last slice] [Start of the last slice]deg);"

The code can be extended for the appropriate number of segments required. The first segment always starts at 00, the end point (in degress) is always the starting point (in degress) of the next slice. The last segement only need a starting point (in degrees)

style="background: conic-gradient(Yellow 0deg, Yellow 90deg, Violet 90deg, Violet 180deg, SkyBlue 180deg, SkyBlue 270deg, Orange 270deg);"

Segment sizes using Percentages

As there are 360 degrees in a circle, 1% = 3.6degs. As the results will not be whole numbers you may need to round up or down accordingly. Remember this is just a representation of the data so it only needs to look about right.

  • =[Percentage]*3.6

Segment sizes using Values

Calculate the percentage of the values and use this to calculate the size of the segments, as shown previously

  • =([Single Value for the segment]/[Sum of all values to be displayed])*100

2 Segments

2.1 Complimentary

  • Green 50%
  • DarkMagenta 50%

2.2 Complimentary

  • CornflowerBlue 50%
  • BurlyWood 50%

2.3 Complimentary

  • DodgerBlue 50%
  • Orange 50%

2.4 Complimentary

  • Gold 50%
  • Blue 50%

3 Segments

3.1 Monochromatic

  • DodgerBlue 33%
  • MediumBlue 33%
  • MidnightBlue 34%

3.2 Monochromatic

  • MediumSeaGreen 3%
  • ForestGreen 10%
  • DarkGreen 62%

3.3 Monochromatic

  • MediumSlateBlue 33%
  • DarkSlateBlue 33%
  • Indigo 34%

3.4 Monochromatic

  • LightCoral 33%
  • Crimson 33%
  • FireBrick 34%

3.5 Analogous

  • Turquoise 33%
  • SteelBlue 33%
  • MediumSeaGreen 34%

3.6 Analogous

  • DodgerBlue 3%
  • MediumBlue 10%
  • Cyan 62%

3.7 Analogous

  • Green 33%
  • DarkGreen 33%
  • MediumSeaGreen 34%

4 Segments

4.1 Tetradic

  • DodgerBlue 3%
  • HotPink 10%
  • DarkOrange 62%
  • YellowGreen 25%

4.2 Tetradic

  • Green 3%
  • MidnightBlue 10%
  • DarkMagenta 62%
  • SaddleBrown 25%

4.3 Tetradic

  • MidnightBlue 3%
  • RebeccaPurple 10%
  • SeaGreen 62%
  • Olive 25%

6 Segments

6.1 Tetradic

  • DodgerBlue 3%
  • LightGreen 10%
  • LightSkyblue 37%
  • Mediumpurple 25%
  • mediumvioletred 8%
  • indianred 17%

6.2 Tetradic

  • Green 3%
  • HotPink 10%
  • YellowGreen 62%
  • Turquoise 25%
  • RoyalBlue 25%
  • PaleGreen25%

6.3 Analogous

  • DarkGreen 3%
  • ForestGreen 10%
  • MediumSeaGreen 37%
  • MediumSpringGreen 25%
  • PaleGreen 8%
  • HoneyDew 17%

6.4 Analogous

  • MidnightBlue 3%
  • Darkblue 10%
  • Blue 37%
  • DodgerBlue 25%
  • CornflowerBlue 8%
  • LightSkyBlue 17%

7 Segments

7.1 Tetradic

  • DodgerBlue 3%
  • LightGreen 10%
  • LightSkyblue 37%
  • Mediumpurple 25%
  • mediumvioletred 8%
  • indianred 8%
  • coral 9%

7.2 Tetradic

  • Green 3%
  • HotPink 10%
  • YellowGreen 62%
  • Turquoise 25%
  • RoyalBlue 25%
  • PaleGreen 25%
  • Khaki 25%

7.3 Analogous

  • MidnightBlue 3%
  • Darkblue 10%
  • Blue 37%
  • DodgerBlue 25%
  • CornflowerBlue 8%
  • LightSkyBlue 8%
  • LightBlue 9%

Do you believe in magic?

Tree View Designs are at the cutting edge of creativity and innovation.

Company Registration Number: 06975947

Tree View Designs Ltd is a company registered in England and Wales

Registered office: 1 Christchurch House Beaufort Court, Sir Thomas Longley Road, Rochester, Kent, England, ME2 4FX

© Tree View Designs Ltd. All rights reserved.

Facebook Twitter