Appear( in viewport) | Line Chart | Piechart counter

======== 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="{&quot;labels&quot;:[&quot;5 Years&quot;,&quot; 10 Years&quot;,&quot; 15 Years&quot;,&quot; 20 Years&quot;,&quot; 25 Years&quot;],&quot;datasets&quot;:[{&quot;label&quot;:&quot;Estimated Savings ($)&quot;,&quot;borderColor&quot;:&quot;#6dab3c&quot;,&quot;backgroundColor&quot;:&quot;#6dab3c&quot;,&quot;data&quot;:[&quot;80000&quot;,&quot; 150000&quot;,&quot; 280000&quot;,&quot; 390000&quot;,&quot; 511000&quot;]}]}"
               >
            <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