Html Chart

Set the categoryAxis property of the jqxChart. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxChart' style="width:530px; height:400px; position: relative; left: 0px; top: 0px;"></div>

JavaScript

const sampleData = [
 {
   a: 0.35,
   b: 14.5
 }, {
   a: 1,
   b: 2.5
 }, {
   a: 10,
   b: 0.2
 }, {
   a: 100,
   b: 205
 }, {
   a: 1,
   b: 100
 }, {
   a: 5.11,
   b: 10.13
 }, {
   a: 20.13,
   b: 10.13
 }, {
   a: 600,
   b: 300
 }];
 const 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
   },
   source: sampleData,
   enableAnimations: true,
   xAxis: {
     dataField: '',
     description: '',
     showGridLines: true,
     showTickMarks: true,
     labels: {
     	 class: 'has-tooltip', 
       formatFunction(a) {
         return a
       }
     }
   },
   seriesGroups: [{
     type: 'column',
     valueAxis: {
       description: 'Value',
       logarithmicScale: true,
       logarithmicScaleBase: 2,
       unitInterval: 1,
       tickMarksInterval: 1,
       gridLinesInterval: 1,
       formatSettings: {
         decimalPlaces: 3
       },

       horizontalTextAlignment: 'right'
     },
     series: [{
       dataField: 'a',
       displayText: 'A'
     }, {
       dataField: 'b',
       displayText: 'B'
     }]
   }]
 };
 $('#jqxChart').jqxChart(settings);
 
 Array.from(document.querySelectorAll('.has-tooltip'))
 	.forEach(e => {
  	e.id = 'x-axis-label-' + e.textContent
  	$(`#${e.id}`).jqxTooltip({ content: `<b>Title:</b> <i>X-axis label</i><br /><b>Value:</b> ${e.textContent}`, position: 'mouse', name: 'movieTooltip'});
  })