JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var data = [];

$.ajax({
  type: "GET",
  url: "https://codepen.io/shashiranjan27/pen/vPragM.js",
  dataType: "text",
  success: function (dataCsv) { processData(dataCsv); }
});

function addDataPoint(label,yValue){
  var yData = parseInt(yValue);
  var labelData = label;
  var dataFlag = false;
  for(var i=0;i<data.length;i++){       
    data[i].dataPoints.push({label:labelData, y:yData});
    dataFlag = true;
  }
  if(!dataFlag){
    data.push({
      type : "column",
      dataPoints : [
        {label: labelData, y:yData}
      ]
    });
  }
}

function processData(allText) {
  var allLinesArray = allText.split('\n');
  if (allLinesArray.length > 0) {
    for (var i = 0; i <= allLinesArray.length - 1; i++) {
      var rowData = allLinesArray[i].split(',');
      addDataPoint(rowData[0],rowData[1]);
    }
    chart.render();
    createPareto();	
  }
}


var chart = new CanvasJS.Chart("chartContainer", {
  theme:"light2",
  title: {
    text: "Top Mobile Phone Brands"
  },
  axisY: {
    title: "Number of Locations",
    lineColor: "#4F81BC",
    tickColor: "#4F81BC",
    labelFontColor: "#4F81BC"
  },
  axisY2: {
    title: "Percent",
    suffix: "%",
    lineColor: "#C0504E",
    tickColor: "#C0504E",
    labelFontColor: "#C0504E"
  },
  data: data
});

function createPareto(){
  var dps = [];
  var yValue, yTotal = 0, yPercent = 0;

  for(var i = 0; i < chart.data[0].dataPoints.length; i++)
    yTotal += chart.data[0].dataPoints[i].y;

  for(var i = 0; i < chart.data[0].dataPoints.length; i++){
    yValue = chart.data[0].dataPoints[i].y;
    yPercent += (yValue / yTotal * 100);
    dps.push({label: chart.data[0].dataPoints[i].label, y: yPercent});
  }

  chart.addTo("data",{type:"line", yValueFormatString: "0.##\"%\"", dataPoints: dps});
  chart.data[1].set("axisYType", "secondary", false);
  chart.axisY[0].set("maximum", yTotal);
  chart.axisY2[0].set("maximum", 100);
}