You are here:

Round chart

[vc_row margin_bottom=»70″][vc_column][vc_column_text]

Doughnut

[/vc_column_text][vc_empty_space height=»50px»][/vc_column][vc_column width=»2/3″ offset=»vc_col-lg-offset-0 vc_col-lg-6 vc_col-md-offset-2 vc_col-md-8 vc_col-sm-offset-2 vc_col-xs-offset-2 vc_col-xs-8″][vc_round_chart type=»doughnut» style=»custom» stroke_width=»0″ tooltips=»» values=»%5B%7B%22title%22%3A%22Communication%22%2C%22value%22%3A%2230%25%22%2C%22color%22%3A%22blue%22%2C%22custom_color%22%3A%22%23573ab7%22%7D%2C%7B%22title%22%3A%22Design%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22pink%22%2C%22custom_color%22%3A%22%234149c7%22%7D%2C%7B%22title%22%3A%22Coding%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22green%22%2C%22custom_color%22%3A%22%23178be7%22%7D%2C%7B%22title%22%3A%22Programming%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%231ac8ee%22%7D%2C%7B%22title%22%3A%22Testing%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%2345e4f2%22%7D%5D» animation=»easeOutSine»][vc_empty_space height=»30px»][/vc_column][vc_column width=»2/3″ offset=»vc_col-lg-offset-0 vc_col-lg-6 vc_col-md-offset-2 vc_col-md-8 vc_col-sm-offset-2 vc_col-xs-offset-2 vc_col-xs-8″][vc_round_chart type=»doughnut» style=»custom» stroke_width=»2″ values=»%5B%7B%22title%22%3A%22Marketing%22%2C%22value%22%3A%2230%25%22%2C%22color%22%3A%22purple%22%2C%22custom_color%22%3A%22%23e91e63%22%7D%2C%7B%22title%22%3A%22Design%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22violet%22%2C%22custom_color%22%3A%22%23ff9800%22%7D%2C%7B%22title%22%3A%22Coding%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22mulled-wine%22%2C%22custom_color%22%3A%22%23ffc104%22%7D%2C%7B%22title%22%3A%22Editing%22%2C%22value%22%3A%2215%25%22%2C%22color%22%3A%22mulled-wine%22%2C%22custom_color%22%3A%22%23cddc38%22%7D%2C%7B%22title%22%3A%22Programming%22%2C%22value%22%3A%225%25%22%2C%22color%22%3A%22turquoise%22%2C%22custom_color%22%3A%22%2304a9f4%22%7D%2C%7B%22title%22%3A%22Testing%22%2C%22value%22%3A%2215%25%22%2C%22color%22%3A%22turquoise%22%2C%22custom_color%22%3A%22%23673ab7%22%7D%2C%7B%22title%22%3A%22Support%22%2C%22value%22%3A%2215%25%22%2C%22color%22%3A%22turquoise%22%2C%22custom_color%22%3A%22%239c27b0%22%7D%5D» animation=»easeOutSine»][vc_empty_space height=»30px»][/vc_column][vc_column width=»1/3″ offset=»vc_col-lg-offset-0 vc_col-lg-4 vc_col-md-offset-0 vc_col-md-4 vc_col-sm-offset-0 vc_col-xs-offset-2 vc_col-xs-8″][vc_round_chart type=»doughnut» style=»custom» stroke_width=»2″ legend=»» values=»%5B%7B%22title%22%3A%22Communication%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22purple%22%2C%22custom_color%22%3A%22%23ff9800%22%7D%2C%7B%22title%22%3A%22Design%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22violet%22%2C%22custom_color%22%3A%22%234daf50%22%7D%2C%7B%22title%22%3A%22Coding%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22mulled-wine%22%2C%22custom_color%22%3A%22%238bc34a%22%7D%2C%7B%22title%22%3A%22Editing%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22mulled-wine%22%2C%22custom_color%22%3A%22%23cddc38%22%7D%2C%7B%22title%22%3A%22Programming%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22turquoise%22%2C%22custom_color%22%3A%22%23ffeb3a%22%7D%2C%7B%22title%22%3A%22Testing%22%2C%22value%22%3A%2230%25%22%2C%22color%22%3A%22turquoise%22%2C%22custom_color%22%3A%22%23ffc104%22%7D%5D» animation=»easeOutSine»][vc_empty_space height=»30px»][/vc_column][vc_column width=»1/3″ offset=»vc_col-lg-offset-0 vc_col-lg-4 vc_col-md-offset-0 vc_col-md-4 vc_col-sm-offset-0 vc_col-xs-offset-2 vc_col-xs-8″][vc_round_chart type=»doughnut» style=»custom» stroke_width=»5″ legend=»» values=»%5B%7B%22title%22%3A%22Communication%22%2C%22value%22%3A%2230%25%22%2C%22color%22%3A%22blue%22%2C%22custom_color%22%3A%22%23e91e63%22%7D%2C%7B%22title%22%3A%22Design%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22pink%22%2C%22custom_color%22%3A%22%23f44336%22%7D%2C%7B%22title%22%3A%22Coding%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22green%22%2C%22custom_color%22%3A%22%23ff5722%22%7D%2C%7B%22title%22%3A%22Programming%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%23ff9800%22%7D%2C%7B%22title%22%3A%22Testing%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%23ffc101%22%7D%5D» animation=»easeOutSine»][vc_empty_space height=»30px»][/vc_column][vc_column width=»1/3″ offset=»vc_col-lg-offset-0 vc_col-lg-4 vc_col-md-offset-0 vc_col-md-4 vc_col-sm-offset-0 vc_col-xs-offset-2 vc_col-xs-8″][vc_round_chart type=»doughnut» style=»custom» stroke_width=»0″ legend=»» values=»%5B%7B%22title%22%3A%22Communication%22%2C%22value%22%3A%2215%25%22%2C%22color%22%3A%22blue%22%2C%22custom_color%22%3A%22%23ff5722%22%7D%2C%7B%22title%22%3A%22Programming%22%2C%22value%22%3A%2225%25%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%23607d8b%22%7D%2C%7B%22title%22%3A%22Testing%22%2C%22value%22%3A%2260%25%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%23374046%22%7D%5D» animation=»easeOutSine»][vc_empty_space height=»30px»][/vc_column][vc_column][vc_toggle title=»GET SETTINGS» el_id=»1448964711352-b76dac12-0e32″][dt_gap height=»10″ /]VC Element: «Round Chart»

Design: Doughnut

Style: Custom

Gap: 0

Show legend? Yes

Show hover values? No

Values

Title: Communication, Value: 30%, Custom Color: #573ab7

Title: Design, Value: 20%, Custom Color: #4149c7

Title: Coding, Value: 20%, Custom Color: #178be7

Title: Programming, Value: 20%, Custom Color: #1ac8ee

Title: Testing, Value: 10%, Custom Color: #45e4f2

Animation: Sine[dt_gap height=»10″ /][/vc_toggle][/vc_column][/vc_row][vc_row margin_bottom=»10″][vc_column][vc_column_text]

Pie

[/vc_column_text][vc_empty_space height=»50px»][/vc_column][vc_column width=»2/3″ offset=»vc_col-lg-offset-0 vc_col-lg-6 vc_col-md-offset-2 vc_col-md-8 vc_col-sm-offset-2 vc_col-xs-offset-2 vc_col-xs-8″][vc_round_chart style=»custom» stroke_width=»0″ tooltips=»» values=»%5B%7B%22title%22%3A%22Communication%22%2C%22value%22%3A%2230%25%22%2C%22color%22%3A%22blue%22%2C%22custom_color%22%3A%22%23573ab7%22%7D%2C%7B%22title%22%3A%22Design%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22pink%22%2C%22custom_color%22%3A%22%234149c7%22%7D%2C%7B%22title%22%3A%22Coding%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22green%22%2C%22custom_color%22%3A%22%23178be7%22%7D%2C%7B%22title%22%3A%22Programming%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%231ac8ee%22%7D%2C%7B%22title%22%3A%22Testing%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%2345e4f2%22%7D%5D» animation=»easeOutSine»][vc_empty_space height=»30px»][/vc_column][vc_column width=»2/3″ offset=»vc_col-lg-offset-0 vc_col-lg-6 vc_col-md-offset-2 vc_col-md-8 vc_col-sm-offset-2 vc_col-xs-offset-2 vc_col-xs-8″][vc_round_chart style=»custom» stroke_width=»2″ values=»%5B%7B%22title%22%3A%22Marketing%22%2C%22value%22%3A%2230%25%22%2C%22color%22%3A%22purple%22%2C%22custom_color%22%3A%22%23e91e63%22%7D%2C%7B%22title%22%3A%22Design%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22violet%22%2C%22custom_color%22%3A%22%23ff9800%22%7D%2C%7B%22title%22%3A%22Coding%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22mulled-wine%22%2C%22custom_color%22%3A%22%23ffc104%22%7D%2C%7B%22title%22%3A%22Editing%22%2C%22value%22%3A%2215%25%22%2C%22color%22%3A%22mulled-wine%22%2C%22custom_color%22%3A%22%23cddc38%22%7D%2C%7B%22title%22%3A%22Programming%22%2C%22value%22%3A%225%25%22%2C%22color%22%3A%22turquoise%22%2C%22custom_color%22%3A%22%2304a9f4%22%7D%2C%7B%22title%22%3A%22Testing%22%2C%22value%22%3A%2215%25%22%2C%22color%22%3A%22turquoise%22%2C%22custom_color%22%3A%22%23673ab7%22%7D%2C%7B%22title%22%3A%22Support%22%2C%22value%22%3A%2215%25%22%2C%22color%22%3A%22turquoise%22%2C%22custom_color%22%3A%22%239c27b0%22%7D%5D» animation=»easeOutSine»][vc_empty_space height=»30px»][/vc_column][vc_column width=»1/3″ offset=»vc_col-lg-offset-0 vc_col-lg-4 vc_col-md-offset-0 vc_col-md-4 vc_col-sm-offset-0 vc_col-xs-offset-2 vc_col-xs-8″][vc_round_chart style=»custom» stroke_width=»2″ legend=»» values=»%5B%7B%22title%22%3A%22Communication%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22purple%22%2C%22custom_color%22%3A%22%23ff9800%22%7D%2C%7B%22title%22%3A%22Design%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22violet%22%2C%22custom_color%22%3A%22%234daf50%22%7D%2C%7B%22title%22%3A%22Coding%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22mulled-wine%22%2C%22custom_color%22%3A%22%238bc34a%22%7D%2C%7B%22title%22%3A%22Editing%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22mulled-wine%22%2C%22custom_color%22%3A%22%23cddc38%22%7D%2C%7B%22title%22%3A%22Programming%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22turquoise%22%2C%22custom_color%22%3A%22%23ffeb3a%22%7D%2C%7B%22title%22%3A%22Testing%22%2C%22value%22%3A%2230%25%22%2C%22color%22%3A%22turquoise%22%2C%22custom_color%22%3A%22%23ffc104%22%7D%5D» animation=»easeOutSine»][vc_empty_space height=»30px»][/vc_column][vc_column width=»1/3″ offset=»vc_col-lg-offset-0 vc_col-lg-4 vc_col-md-offset-0 vc_col-md-4 vc_col-sm-offset-0 vc_col-xs-offset-2 vc_col-xs-8″][vc_round_chart style=»custom» stroke_width=»5″ legend=»» values=»%5B%7B%22title%22%3A%22Communication%22%2C%22value%22%3A%2230%25%22%2C%22color%22%3A%22blue%22%2C%22custom_color%22%3A%22%23e91e63%22%7D%2C%7B%22title%22%3A%22Design%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22pink%22%2C%22custom_color%22%3A%22%23f44336%22%7D%2C%7B%22title%22%3A%22Coding%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22green%22%2C%22custom_color%22%3A%22%23ff5722%22%7D%2C%7B%22title%22%3A%22Programming%22%2C%22value%22%3A%2220%25%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%23ff9800%22%7D%2C%7B%22title%22%3A%22Testing%22%2C%22value%22%3A%2210%25%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%23ffc101%22%7D%5D» animation=»easeOutSine»][vc_empty_space height=»30px»][/vc_column][vc_column width=»1/3″ offset=»vc_col-lg-offset-0 vc_col-lg-4 vc_col-md-offset-0 vc_col-md-4 vc_col-sm-offset-0 vc_col-xs-offset-2 vc_col-xs-8″][vc_round_chart style=»custom» stroke_width=»0″ legend=»» values=»%5B%7B%22title%22%3A%22Communication%22%2C%22value%22%3A%2215%25%22%2C%22color%22%3A%22blue%22%2C%22custom_color%22%3A%22%23ff5722%22%7D%2C%7B%22title%22%3A%22Programming%22%2C%22value%22%3A%2225%25%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%23607d8b%22%7D%2C%7B%22title%22%3A%22Testing%22%2C%22value%22%3A%2260%25%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%23374046%22%7D%5D» animation=»easeOutSine»][vc_empty_space height=»30px»][/vc_column][vc_column][vc_toggle title=»GET SETTINGS» el_id=»1448964124495-5ee01efc-5262″][dt_gap height=»10″ /]VC Element: «Round Chart»

Design: Pie

Style: Custom

Gap: 0

Show legend? No

Show hover values? Yes

Values

Title: Communication, Value: 15%, Custom Color: #ff5722

Title: Design, Value: 25%, Custom Color: #607d8b

Title: Coding, Value: 60%, Custom Color: #374046

Animation: Sine[dt_gap height=»10″ /][/vc_toggle][/vc_column][/vc_row]