0

I'm looking to use a react component within a highchart axis label. I've tried a number of different methods to accomplish this with no success.

Here is where I am right now:

import React from 'react'
import ReactHighcharts from 'react-highcharts

import MyOtherReactComponent from '...'

export const MyReactChart = () => (
  <ReactHighcharts config={{
    ...
    xAxis: [{
      categories: ['Item 1', 'Item 2'],
      labels: {useHTML: true, formatter: function() {
        return this.value + <MyOtherReactComponent  options={options} />
      }}
    }, {// Secondary xAxis}]
  }}
)

I keep getting the following:

Item 1 [Object, Object]
Item 2 [Object, Object]

Can someone tell me how I can accomplish this?

Much appreciated and cheers!

JasonA
  • 241
  • 2
  • 5
  • 13
  • I should mention - I did not completely describe the React component MyReactChart above. I'm not having issues with erroneous json objects or arrays and my components render fine. I'm only having difficulty with using a second react component inside of a highchart label. Thanks! – JasonA Feb 04 '18 at 20:34
  • 1
    Highcharts formatters require `string` as returned value, not a react component. See samples from [docs](https://api.highcharts.com/highcharts/xAxis.labels.formatter). – Paweł Fus Feb 06 '18 at 17:26

0 Answers0