JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="http://cdn3.devexpress.com/jslib/16.1.4/js/dx.all.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/16.1.4/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/16.1.4/css/dx.light.css">
<div id="container" style="height: 400px;"></div>

JavaScript

var chart = $("#container").dxChart({
        dataSource: [{
            day: "Monday",
            oranges: 3
        }, {
            day: "Tuesday",
            oranges: 2
        }, {
            day: "Wednesday",
            oranges: 3
        }, {
            day: "Thursday",
            oranges: 4
        }, {
            day: "Friday",
            oranges: 6
        }, {
            day: "Saturday",
            oranges: 11
        }, {
            day: "Sunday",
            oranges: 4
        }],
        series: {
            argumentField: "day",
            valueField: "oranges",
            type: "bar"
        }
    }).dxChart(),
    PayerLegendBoxes = $("#container .dxc-legend g rect");

PayerLegendBoxes.each(function() {
    var nextElementHTML = $(this).parent().find("text").text();

    var currElementTip = (nextElementHTML + "tip").replace(/\s/g, "_");

    var currElement = this;

    var title = chart.append("<span style='display:none;' id=" + currElementTip + ">" + nextElementHTML + "</span>");

    var tooltipSimple = $("#" + currElementTip).dxTooltip({
        target: currElement
    }).dxTooltip("instance");

    $(currElement).unbind().hover(function() {
        tooltipSimple.toggle();
    });

});