JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>
<div id="legend">

<ul class="legend_top">
<p>lr=800A</p>
<li>816A</li>
<li>980A</li>
<li>564A</li>
</ul>
</div>
<div id="chart"></div>

CSS

.ui-chart-container {
    border: transparent;

}
#legend
{
  background:#fff;
}
.legend_top
{
  padding:5px 0 5px 0px;
  margin:0;
  overflow:hidden;
}
.legend_top p
{
  float:left;
    background:none;
  color:#333;
  font-size:2vw;
  padding:0 6px 0 6px;
  text-align:left;
}
.legend_top li
{
  list-style:none;
  float:left;
    font-size:3vw;
 width:29%;
  color:#fff;
  text-align:center
}

.legend_top li:nth-child(2)
{
  background:orange;

}
.legend_top li:nth-child(3)
{
  background:red;

}
.legend_top li:nth-child(4)
{
  background:green;

}

JavaScript

$(function () {

    var data = [{
        label: "l1",
        value: 0
    }, {
        label: "l2",
        value: 0
    }, {
        label: "l3",
        value: 0
    }];

    var textualMarker = {
        measure: function (measureInfo) {
            var cont = measureInfo.context;
            var data = measureInfo.data;
            var name = "null";
            if (data.item() != null) {
                name = data.item().value.toString() + "%";
            }
            cont.font = "8vw calibri";
            var height = cont.measureText("M").width;
            var width = cont.measureText(name).width;
            measureInfo.width = width;
            measureInfo.height = height;
        },
        render: function (renderInfo) {
            var ctx = renderInfo.context,
                radius;
            if (renderInfo.isHitTestRender) {
                ctx.fillStyle = renderInfo.data.actualItemBrush().fill();
            } else {
                ctx.fillStyle = "black";
            }

            var data = renderInfo.data;
            var name = data.item().value.toString() + "%";
            var halfWidth = renderInfo.availableWidth / 2.0;
            var halfHeight = renderInfo.availableHeight / 2.0;
            
            var minimumValue = $("#chart").igDataChart("getActualMinimumValue", "yAxis");
            var y = $("#chart").igDataChart("scaleValue", "yAxis", minimumValue) - renderInfo.availableHeight - 20;
          
            var x = renderInfo.xPosition - halfWidth;

            if (renderInfo.isHitTestRender) {
                ctx.fillRect(x, y, renderInfo.availableWidth, renderInfo.availableHeight);
            } else {
                ctx.textBaseline = "top";
               ctx.fillStyle = "white";
             //   ctx.font = "48vm calibri";
                ctx.fillText(name, x, y);
            }
        }
    };

    $("#chart").igDataChart({
        css: {
            chart: "test"
        },
        width: "100%",
       ...