text: import React from 'react';
  import ReactDOM from 'react-dom';
  
  import JqxChart from '../../../jqwidgets-react/react_jqxchart.js';
  
  class App extends React.Component {
      render() {
          let sampleData = [
              { a: 0.1535, b: 0.5 },
              { a: 0.48, b: 20.5 },
              { a: 10, b: 60 },
              { a: 100, b: 80 },
              { a: 200, b: 90 },
              { a: 245.11, b: 100.13 },
              { a: 300.13, b: 150.13 },
              { a: 340, b: 200 }
          ];
  
          let padding = { left: 5, top: 5, right: 15, bottom: 5 };
  
          let titlePadding = { left: 0, top: 0, right: 0, bottom: 10 };
  
          let xAxis =
              {
                  dataField: "a",
                  logarithmicScale: true,
                  logarithmicScaleBase: 2,
                  labels: {
                      visible: 'custom', // show only custom labels. Change to true to show all labels or false to hide all
                      custom: [{ value: 10 }, { value: 20 }, { value: 'custom label at offset 100', offset: 100 }], // an array of items representing custom labels
                      // if the item has an offset property, the item is rendered at that offset, otherwise the value is mapped to an offset
                      // corresponding to its position on the axis scale. If an item has both a value and an offset property, the value
                      // property is not mappped to an offset, and instead it's just used to display the label
                      // the format function shows how to format the labels before they are displayed
                      formatFunction: (value) => {
                          return "{" + value + "}";
                      }
                  },
                  gridLines:
                  {
                      visible: 'custom', // show only custom grid lines. Change to true to show all grid lines or false to hide all
                      custom: [{ value: 10 }, { value: 20 }, { offset: 100 }]
                  },
                  tickMarks:
                  {
                      visible: 'custom', // show only custom tick marks. Change to true to show all tick marks or false to hide all
                      custom: [{ value: 10 }, { value: 20 }, { offset: 100 }]
                  },
                  flip: true
              };
  
          let valueAxis =
              {
                  logarithmicScale: true,
                  logarithmicScaleBase: 2,
                  title: { text: "Value" },
                  labels: {
                      visible: true,
                      horizontalAlignment: "right",
                      custom: [{ value: 10 }, { value: 20 }, { offset: 90, value: 'custom' }]
                  },
                  gridLines: {
                      custom: [{ value: 10 }, { value: 20 }, { offset: 90 }]
                  },
                  tickMarks: {
                      custom: [{ value: 10 }, { value: 20 }, { offset: 90 }]
                  },
                  flip: false
              };
  
          let seriesGroups =
              [
                  {
                      type: "scatter",
                      series: [
                          { dataField: "a", displayText: "A", symbolType: "diamond", symbolSize: 10 },
                          { dataField: "b", displayText: "B", symbolType: "triangle_up", symbolSize: 10 }
                      ],
                      bands: [{ from: 64, to: 256, color: 'red', opacity: 0.2 }]
                  }
              ];
          return (
              <JqxChart style={{ width: 850, height: 500 }}
                  title={'Custom labels, grid lines and tick marks offsets'}
                  description={'This example demonstrates how to use labels, tick marks and grid lines at custom offsets'}
                  enableAnimations={false} padding={padding}
                  titlePadding={titlePadding} source={sampleData} xAxis={xAxis}
                  valueAxis={valueAxis}  seriesGroups={seriesGroups}
              />
          )
      }
  }
  
  ReactDOM.render(<App />, document.getElementById('app'));
  