Charts

[vc_row full_width=»stretch_row» parallax=»content-moving» css=».vc_custom_1430236698110{padding-top: 35px !important;padding-bottom: 60px !important;background-image: url(http://vcpreview.com/80e7cd25e63ecf743e404978/wp-content/uploads/sites/23273/2015/01/background_flat.png?id=23) !important;background-position: center;background-repeat: no-repeat;background-size:cover;}»][vc_column][vc_custom_heading text=»Charts» font_container=»tag:h2|font_size:46|text_align:left|color:%23ffffff|line_height:1.5″ google_fonts=»font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal»][vc_separator align=»align_left» border_width=»3″ el_width=»50″ el_class=»separator-in-title»][vc_column_text css=».vc_custom_1437482984436{margin-top: -15px !important;}»]Display your data using progress bar, line, round or pie charts.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=»Progress Bar» font_container=»tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=»font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal» css=».vc_custom_1422968391755{padding-bottom: 15px !important;}»][vc_column_text]

Progress Bar content element allows displaying your skills in a well crafted bars backed up with fancy CSS animation to perfectly drag attention of your customers.

[/vc_column_text][/vc_column][/vc_row][vc_row css=».vc_custom_1422959791599{padding-bottom: 35px !important;}»][vc_column width=»1/2″][vc_progress_bar bgcolor=»bar_red»][vc_progress_bar bgcolor=»bar_turquoise» units=»%»][/vc_column][vc_column width=»1/2″][vc_progress_bar bgcolor=»bar_blue» options=»striped,animated»][vc_progress_bar values=»90|Development|#e6ed90,80|Design|#8de8e2,70|Marketing|#cb8de8″ bgcolor=»custom» options=»striped,animated» custombgcolor=»#cb8de8″][/vc_column][/vc_row][vc_row full_width=»stretch_row_content_no_spaces»][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=»Pie Chart» font_container=»tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=»font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal» css=».vc_custom_1422968736831{padding-bottom: 15px !important;}»][vc_column_text]

Pie Chart content element allows displaying of your data by using fancy pie chart with easy to modify colors, values and labels.

[/vc_column_text][/vc_column][/vc_row][vc_row css=».vc_custom_1422959791599{padding-bottom: 35px !important;}»][vc_column width=»1/4″][vc_pie value=»10″ label_value=»10″ color=»btn-primary» units=»%»][/vc_column][vc_column width=»1/4″][vc_pie value=»25″ label_value=»25″ color=»btn-success» units=»%»][/vc_column][vc_column width=»1/4″][vc_pie label_value=»50″ color=»btn-warning» units=»%»][/vc_column][vc_column width=»1/4″][vc_pie value=»75″ label_value=»75″ color=»btn-danger» units=»%»][/vc_column][/vc_row][vc_row full_width=»stretch_row_content_no_spaces»][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=»Round Charts – Doughnut and Pie» font_container=»tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=»font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal» css=».vc_custom_1435764795309{padding-bottom: 15px !important;}»][vc_column_text]

Round chart offers 2 new types of charts – Doughnut and Pie with multiple styling and animation preset options. Control colors, gaps and much more easily.

[/vc_column_text][/vc_column][/vc_row][vc_row css=».vc_custom_1422959791599{padding-bottom: 35px !important;}»][vc_column width=»1/3″][vc_round_chart type=»doughnut» stroke_width=»2″][/vc_column][vc_column width=»1/3″][vc_round_chart type=»doughnut» stroke_width=»2″ values=»%5B%7B%22title%22%3A%22One%22%2C%22value%22%3A%2260%22%2C%22color%22%3A%22violet%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22value%22%3A%2240%22%2C%22color%22%3A%22sandy-brown%22%7D%2C%7B%22title%22%3A%22Three%22%2C%22value%22%3A%2250%22%2C%22color%22%3A%22chino%22%2C%22custom_color%22%3A%22%23cec2ab%22%7D%5D» animation=»easeOutQuart»][/vc_column][vc_column width=»1/3″][vc_round_chart stroke_width=»0″ values=»%5B%7B%22title%22%3A%22One%22%2C%22value%22%3A%2260%22%2C%22color%22%3A%22turquoise%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22value%22%3A%2210%22%2C%22color%22%3A%22green%22%2C%22custom_color%22%3A%22%23cec2ab%22%7D%5D» animation=»easeOutBounce»][/vc_column][/vc_row][vc_row css=».vc_custom_1422959791599{padding-bottom: 35px !important;}»][vc_column width=»1/3″][vc_round_chart style=»custom» stroke_width=»5″ legend=»» values=»%5B%7B%22title%22%3A%22Two%22%2C%22value%22%3A%2240%22%2C%22color%22%3A%22pink%22%2C%22custom_color%22%3A%22%23ead620%22%7D%2C%7B%22title%22%3A%22One%22%2C%22value%22%3A%2260%22%2C%22color%22%3A%22blue%22%2C%22custom_color%22%3A%22%23b972c9%22%7D%5D» animation=»easeOutQuart»][/vc_column][vc_column width=»1/3″][vc_round_chart type=»doughnut» stroke_width=»2″ legend=»» values=»%5B%7B%22title%22%3A%22One%22%2C%22value%22%3A%2260%22%2C%22color%22%3A%22pink%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22value%22%3A%2250%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%23cec2ab%22%7D%5D»][/vc_column][vc_column width=»1/3″][vc_round_chart type=»doughnut» style=»modern» stroke_width=»0″ legend=»» values=»%5B%7B%22title%22%3A%22One%22%2C%22value%22%3A%2225%22%2C%22color%22%3A%22sky%22%7D%2C%7B%22title%22%3A%22Three%22%2C%22value%22%3A%2255%22%2C%22color%22%3A%22vista-blue%22%2C%22custom_color%22%3A%22%23cec2ab%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22value%22%3A%2235%22%2C%22color%22%3A%22purple%22%2C%22custom_color%22%3A%22%23f4524d%22%7D%5D» animation=»easeOutBack»][/vc_column][/vc_row][vc_row full_width=»stretch_row_content_no_spaces»][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=»Line and Bar Charts» font_container=»tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=»font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal» css=».vc_custom_1435764769557{padding-bottom: 15px !important;}»][vc_column_text]

Line and Bar charts allows creating vertical charts with X and Y axis. Control colors, legend and much more.

[/vc_column_text][/vc_column][/vc_row][vc_row css=».vc_custom_1422959791599{padding-bottom: 35px !important;}»][vc_column width=»1/2″][vc_line_chart type=»line» values=»%5B%7B%22title%22%3A%22One%22%2C%22y_values%22%3A%2210%3B%2015%3B%2020%3B%2025%3B%2027%3B%2025%3B%2023%3B%2025%22%2C%22color%22%3A%22blue%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22y_values%22%3A%2225%3B%2018%3B%2016%3B%2017%3B%2020%3B%2025%3B%2030%3B%2035%22%2C%22color%22%3A%22pink%22%7D%5D» animation=»easeOutBack»][/vc_column][vc_column width=»1/2″][vc_line_chart values=»%5B%7B%22title%22%3A%22One%22%2C%22y_values%22%3A%2210%3B%2015%3B%2020%3B%2025%3B%2027%3B%2025%3B%2023%3B%2025%22%2C%22color%22%3A%22sandy-brown%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22y_values%22%3A%2225%3B%2018%3B%2016%3B%2017%3B%2020%3B%2025%3B%2030%3B%2035%22%2C%22color%22%3A%22vista-blue%22%7D%2C%7B%22title%22%3A%22Three%22%2C%22y_values%22%3A%2235%3B%2032%3B%2045%3B%2025%3B%2025%3B%2015%3B%2030%3B%2026%22%2C%22color%22%3A%22chino%22%2C%22custom_color%22%3A%22%23ebebeb%22%7D%5D» animation=»easeinQuad»][/vc_column][/vc_row]