======== Appear $('.cm_graph_sec').appear(function() { window.vc_iframe || vc_line_charts(); }); ========= Pie chart <span class="kd_chart" data-bar-color="{{barColor}}" data-track-color="#c9c9c9" data-line-width="5" data-percent="{{item.progress_value}}"> <span class="pc_percent_container"> <span class="pc_percent">{{item.progress_value}}</span>{{item.suffix}} </span> </span> $(".kd_pie_chart .kd_chart").each(function(index, value) { $(this).appear(function() { $(this).easyPieChart({ barColor: "#000", trackColor: "rgba(210, 210, 210, 0.2)", animate: 2000, size: "160", lineCap: 'square', lineWidth: "2", scaleColor: false, onStep: function(from, to, percent) { $(this.el).find(".pc_percent").text(Math.round(percent)); } }); }); var chart = window.chart = $("kd_pie_chart .kd_chart").data("easyPieChart"); }); ========== Line chart <div class="vc_chart vc_line-chart wpb_content_element" data-vc-legend="1" data-vc-tooltips="1" data-vc-animation="easeInOutCubic" data-vc-type="bar" data-vc-values="{"labels":["5 Years"," 10 Years"," 15 Years"," 20 Years"," 25 Years"],"datasets":[{"label":"Estimated Savings ($)","borderColor":"#6dab3c","backgroundColor":"#6dab3c","data":["80000"," 150000"," 280000"," 390000"," 511000"]}]}" > <div class="wpb_wrapper"> <canvas class="vc_line-chart-canvas" width="1" height="1"></canvas> </div> </div> $('.cm_graph_sec').appear(function() { window.vc_iframe || vc_line_charts(); }); https://norwichsolar.com/solutions/vermont-municipal-solar/ - reference page url
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter