JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://prerelease.componentone.com/wijmo5/latest/styles/wijmo.min.css">
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20173.380/controls/wijmo.chart.min.js"></script>
   <div id="theChart"></div>

JavaScript

$(document).ready(function () {
            var _data = "{\"series\":[[{\"id\":[1465],\"x\":\"some long text labels for testing\",\"y\":1},{\"id\":[1541],\"x\":\"another long text label for testing\",\"y\":1},{\"id\":[1542],\"x\":\"some random number 142\",\"y\":1},{\"id\":[1543],\"x\":\"totally misplaced and overlapping\",\"y\":1},{\"id\":[1544],\"x\":\"misplaced labels due to long text string\",\"y\":1},{\"id\":[1545],\"x\":\"can not see this long label\",\"y\":1},{\"id\":[1546],\"x\":\"very long label text cause the chart to be shrinked and badly positioned\",\"y\":1},{\"id\":[1547],\"x\":\"1547\",\"y\":1},{\"id\":[1548],\"x\":\"1548\",\"y\":1},{\"id\":[2],\"x\":\"2\",\"y\":1},{\"id\":[2534],\"x\":\"2534\",\"y\":1},{\"id\":[2535],\"x\":\"2535\",\"y\":1},{\"id\":[2536],\"x\":\"2536\",\"y\":1},{\"id\":[2537],\"x\":\"2537\",\"y\":1}]]}";
            g_Data = JSON.parse(_data);
            console.log(g_Data)
            // initialize the chart
            var chart = new wijmo.chart.FlexChart('#theChart', {
                itemsSource: g_Data.series[0],
				chartType:0,
                bindingX: 'x',
                series:[{name: "ssss",binding: "y",symbolSize:10}],
                axisY: {title:'test random title', 
                				itemFormatter:function (engine, label) {
            							label.text = wijmo.Globalize.formatNumber(label.val,'n5',false);
            							return label;},
            						},
            });

        });