Axes

React JSX Highcharts supports X, Y and Z axes via it's <XAxis />, <YAxis /> and <ZAxis /> components.

<YAxis />

Note: For v1 and v2 users, this requires an id prop

Just like Highcharts, defaults to type linear, if no type provided.

<XAxis />

Has a different defaults depending on chart context

• When contained in a <HighchartsChart />

  • Defaults to type linear
  • Defaults to an ID which is a UUID (v3+)

• When contained in a <HighchartsStockChart/>

  • Defaults to type datetime
  • Enforces an ID of xAxis

<ZAxis />

Note: has a default id of zAxis that cannot be overridden (as you can only have one Z axis)

Just like Highcharts, defaults to type linear, if no type provided.

Axis Titles

Via the <XAxis.Title />, <YAxis.Title /> and <ZAxis.Title /> components. These are helper components for passing title configuration, except the text prop is inferred from React's special children prop.

Note

Events are passed as onEventName, rather than passing an events object.

Example usage

<XAxis onAfterSetExtremes={this.handleAfterSetExtremes}>
  <XAxis.Title>Time</XAxis.Title>
</XAxis>

<YAxis id="price">
  <YAxis.Title>Price</YAxis.Title>
  <AreaSplineSeries id="profit" name="Profit" data={data1} />
</YAxis>

<YAxis id="social" opposite>
  <YAxis.Title align="high" rotation={0}>Social Buzz</YAxis.Title>
  <SplineSeries id="twitter" name="Twitter mentions" data={data2} />
</YAxis>