JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxChart' style="width:530px; height:400px; position: relative; left: 0px; top: 0px;"></div>
JavaScript
var sampleData = [
{
a: 1000,
b: 2
}, {
a: 1000,
b: 3
}, {
a:1000,
b: 5
}, {
a: 1000,
b: 6
}, {
a: 1000,
b: 7
}, {
a: 1000,
b: 8
}];
var source = {
localdata: sampleData,
type: 'array',
datafields: [
{ name: 'a', type: 'int' },
{ name: 'b', type: 'int' }
],
loadComplete: function(records) {
var value = records[0].a;
for (var i = 1; i < records.length; i++){
if (value != records[i].a) {
return;
}
}
settings.seriesGroups[0].valueAxis.minValue = value - 1;
settings.seriesGroups[0].valueAxis.maxValue = value + 1;
}
}
var dataAdapter = new $.jqx.dataAdapter(source);
var settings = {
title: "Logarithmic Scale Axis Example",
description: "Sample logarithmic scale axis with base 2",
padding: {
left: 5,
top: 5,
right: 5,
bottom: 5
},
titlePadding: {
left: 0,
top: 0,
right: 0,
bottom: 10
}, categoryAxis: {
dataField: 'b',
description: '',
showGridLines: true,
showTickMarks: true
},
source: dataAdapter,
enableAnimations: true,
seriesGroups: [{
type: 'spline',
valueAxis: {
description: 'Value',
displayValueAxis: true,
...