Animated 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!

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.