JSFiddle - React, Tailwind, and code Playground

by Sanchit Jain

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://www.stocinn.com/stoccharts/js/stocChart.js"></script>
<div id='barWithLogoMenu'></div>

CSS

#barWithLogoMenu {
    width:800px;
    height:400px;
}

JavaScript

var AdvancedBarData = {

    "yData": [3, 5, 6, 2, 10, 20, 10],
        'xData': ["Volkswagen", "Hyundai", "Toyota", "Ford", "porsche", "Ebay", "PayTm"],
        "imagePathArray": ["./img/logos/1.jpg", "./img/logos/2.jpg", "./img/logos/3.jpg", "./img/logos/4.jpg", "./img/logos/5.jpg", "./img/logos/6.jpg", "./img/logos/7.jpg"],
        "color": ["cyan"],
        "yIndicationLabel": "Profit",
        "xIndicationLabel": "Company"
}

var colorArray = ["#A3BFDB"];
var xFieldName = "over";
var yFieldName = "run";
var axisColor = "black";


var cnfg = {
    "data": AdvancedBarData
};
$(document).ready(function () {
  	var stocChart30=$("#barWithLogoMenu").stocCharts();
		stocChart30.barWithLogo(cnfg);
});