Progress Bars & Charts

Progress Bars

Set Any Color & Values

[vc_progress_bar values=»%5B%7B%22label%22%3A%22Development%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22custom%22%2C%22customcolor%22%3A%22%237cd562%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22custom%22%2C%22customcolor%22%3A%22rgba(124%2C213%2C98%2C0.7)%22%7D%2C%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22custom%22%2C%22customcolor%22%3A%22rgba(124%2C213%2C98%2C0.6)%22%7D%5D»]

[vc_progress_bar values=»%5B%7B%22label%22%3A%22Marketing%22%2C%22value%22%3A%2270%22%2C%22color%22%3A%22custom%22%2C%22customcolor%22%3A%22rgba(124%2C213%2C98%2C0.6)%22%7D%2C%7B%22label%22%3A%22Design%22%2C%22value%22%3A%2280%22%2C%22color%22%3A%22custom%22%2C%22customcolor%22%3A%22rgba(124%2C213%2C98%2C0.7)%22%7D%2C%7B%22label%22%3A%22Development%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22custom%22%2C%22customcolor%22%3A%22%237cd562%22%7D%5D»]

Pie Charts

Combine With Other Elements

[vc_pie value=»90″ color=»custom» units=»%» custom_color=»#7cd562″]

[vc_icon icon_fontawesome=»fa fa-moon-o» size=»lg» align=»center»]

Sleep Quality

[vc_pie value=»80″ color=»custom» units=»%» custom_color=»#7cd562″]

[vc_icon icon_fontawesome=»fa fa-tint» size=»lg» align=»center»]

Water Consumption

[vc_pie value=»95″ color=»custom» units=»%» custom_color=»#7cd562″]

[vc_icon icon_fontawesome=»fa fa-bullseye» size=»lg» align=»center»]

Targets Reached

[vc_pie value=»85″ color=»custom» units=»%» custom_color=»#7cd562″]

[vc_icon icon_fontawesome=»fa fa-plug» size=»lg» align=»center»]

Power

Round Chart

Doughnut or Pie

[vc_round_chart type=»doughnut» style=»custom» stroke_width=»1″ stroke_color=»grey» values=»%5B%7B%22title%22%3A%22Design%22%2C%22value%22%3A%2260%22%2C%22color%22%3A%22green%22%2C%22custom_color%22%3A%22%237cd562%22%7D%2C%7B%22title%22%3A%22Development%22%2C%22value%22%3A%2240%22%2C%22color%22%3A%22grey%22%7D%5D»]

[vc_round_chart style=»custom» stroke_width=»1″ stroke_color=»grey» values=»%5B%7B%22title%22%3A%22Design%22%2C%22value%22%3A%2260%22%2C%22color%22%3A%22green%22%7D%2C%7B%22title%22%3A%22Development%22%2C%22value%22%3A%2240%22%2C%22color%22%3A%22grey%22%2C%22custom_color%22%3A%22%23fed230%22%7D%5D»]

[vc_round_chart type=»doughnut» style=»custom» stroke_width=»5″ values=»%5B%7B%22title%22%3A%22Design%22%2C%22value%22%3A%2260%22%2C%22color%22%3A%22peacoc%22%2C%22custom_color%22%3A%22%237cd562%22%7D%2C%7B%22title%22%3A%22Development%22%2C%22value%22%3A%2240%22%2C%22color%22%3A%22grey%22%7D%5D»]

Line Charts

Line or Bar

[vc_line_chart type=»line» style=»custom» 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%2C%22custom_color%22%3A%22%23ffd300%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%2C%22custom_color%22%3A%22%237cd562%22%7D%5D» animation=»easeOutSine»]

[vc_line_chart style=»custom» 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%2C%22custom_color%22%3A%22%23ffd300%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%2C%22custom_color%22%3A%22%237cd562%22%7D%5D» animation=»easeOutSine»]

[vc_line_chart type=»line» style=»custom» 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%2C%22custom_color%22%3A%22%23ffd300%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22y_values%22%3A%2225%3B%2018%3B%2040%3B%2017%3B%2020%3B%2025%3B%2030%3B%2035%22%2C%22color%22%3A%22pink%22%2C%22custom_color%22%3A%22%237cd562%22%7D%2C%7B%22title%22%3A%22Three%22%2C%22y_values%22%3A%223%3B%207%3B%2030%3B%2023%3B%2014%3B%2012%3B%203%3B%205%22%2C%22color%22%3A%22pink%22%2C%22custom_color%22%3A%22%23dbdbdb%22%7D%5D» animation=»easeOutSine»]