Pie Charts

[section_title style=”underline” border_color=”#dddddd” top_margin=”40″ bottom_margin=”40″]Legend with Icon[/section_title]

[column size=”one_third” is_last=”false”]
[pie_chart legend_style=”icon” icon=”typicons-weather-stormy” line_width=”17″ bar_color=”#e6389a” background_color=”#dcdcdc” percentage=”26″]Legend 1[/pie_chart]
[/column]

[column size=”one_third” is_last=”false”]
[pie_chart legend_style=”icon” icon=”typicons-weather-shower” line_width=”17″ bar_color=”#b8e238″ background_color=”#dcdcdc” percentage=”50″]Legend 2[/pie_chart]
[/column]

[column size=”one_third” is_last=”true”]
[pie_chart legend_style=”icon” icon=”typicons-weather-sunny” line_width=”17″ bar_color=”#38d9e8″ background_color=”#dcdcdc” percentage=”90″]Legend 3[/pie_chart]
[/column]

 

Set your colors, percentages, legend text and center display. Even the [highlight bg_color=”#33bccc” text_color=”#ffffff”]thickness of the bar[/highlight] can be adjusted!

[section_title style=”underline” border_color=”#dddddd” top_margin=”40″ bottom_margin=”40″]Legend with Percentage[/section_title]

[column size=”one_fourth” is_last=”false”]
[pie_chart legend_style=”percentage” custom_text=”Custom Text Here” line_width=”13″ bar_color=”#9869c4″ background_color=”#dcdcdc” percentage=”25″]Legend 1[/pie_chart]
[/column]

[column size=”one_fourth” is_last=”false”]
[pie_chart legend_style=”percentage” custom_text=”Custom Text Here” line_width=”13″ bar_color=”#3abe88″ background_color=”#dcdcdc” percentage=”45″]Legend 2[/pie_chart]
[/column]

[column size=”one_fourth” is_last=”false”]
[pie_chart legend_style=”percentage” custom_text=”Custom Text Here” line_width=”13″ bar_color=”#5081cb” background_color=”#dcdcdc” percentage=”60″]Legend 3[/pie_chart]
[/column]

[column size=”one_fourth” is_last=”true”]
[pie_chart legend_style=”percentage” custom_text=”Custom Text Here” line_width=”13″ bar_color=”#ee5f77″ background_color=”#dcdcdc” percentage=”90″]Legend 4[/pie_chart]
[/column]

[section_title style=”underline” border_color=”#dddddd” top_margin=”40″ bottom_margin=”40″]Legend with Custom Text[/section_title]

[column size=”one_third” is_last=”false”]
[pie_chart legend_style=”custom_text” custom_text=”Add Your Own Text” line_width=”31″ bar_color=”#a4d19f” background_color=”#e4e4e4″ percentage=”63″]Legend 1[/pie_chart]
[/column]

[column size=”one_third” is_last=”false”]
[pie_chart legend_style=”custom_text” custom_text=”Add Your Own Text” line_width=”31″ bar_color=”#9edde1″ background_color=”#e4e4e4″ percentage=”85″]Legend 2[/pie_chart]
[/column]

[column size=”one_third” is_last=”true”]
[pie_chart legend_style=”custom_text” custom_text=”Add Your Own Text” line_width=”31″ bar_color=”#e9bae0″ background_color=”#e4e4e4″ percentage=”36″]Legend 3[/pie_chart]
[/column]

 

Insert into columns to create eye-catching css animated pie charts in any configuration you want!