JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
		var data = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
    		logData = data.map(function (value) {
          	return {
            	y: Math.log(value) / Math.LN10,
              realY: value
              };
          });

    $('#container').highcharts({
				chart: {
        	type: 'pie'
        },

        title: {
            text: 'Logarithmic axis demo'
        },

        xAxis: {
            tickInterval: 1
        },

        tooltip: {
            headerFormat: '<b>{series.name}</b><br />',
            pointFormat: 'x = {point.x}, y = {point.y}'
        },

				plotOptions: {
        	pie: {
          	dataLabels: {
            	enabled: false
            }
          }
        },

        series: [{
        		center: ['20%', '50%'],
            size: '50%',
            data: data,
            pointStart: 1
        }, {
        	center: ['70%', '50%'],
          size: '50%',
        	data: logData,
          pointStart: 1,
          tooltip: {
          	headerFormat: '<b>{series.name}</b><br />',
            pointFormat: 'x = {point.x}, y = {point.realY}'
          }
        }]
    });
});