A way to add extra data to points in Highcharts

[alarrosa14]

In Highcharts, you can load extra data to the points in a series.

    series: [ {
        name: 'Foo',
        data: [
            {
                y : 3,
                myData : 'firstPoint'
            },
            {
                y : 7,
                myData : 'secondPoint'
            },
            {
                y : 1,
                myData : 'thirdPoint'
            }
        ]
    } ]

This is very useful to customize tooltips:

tooltip: {
    formatter: function() {
        return 'Extra data: <b>' + this.point.myData + '</b>';
    }
}

I can't find a way to do this using react-chartkick. Any suggestions?

[ankane]

As far as I know, you can't pass an object that includes functions in as props with React, so not possible with Chartkick React.

[alarrosa14]

@ankane I may have explained myself poorly.

I have the tooltip.pointFormatter function working perfectly fine inside the library prop. The thing is that I would like to have extra data available to be shown in the tooltip. This is totally possible in Highcharts by simply adding this data to the series.data object, alongside with the chart data.

The issue is that I cannot find a way to do this using the data prop; every data that's not name or the chart data per-se seems to be ignored by React-ChartKick and is not set to the points. Is it posible to use library prop to pass data into the chart, ignoring the data prop?

[ankane]

My bad. Your first explanation is good, but think I misread it. Also, good to know that React supports this. Chartkick has its own data format (separate from Google Charts, Highcharts, and Chart.js), and there's not a way to pass extra data with it. Still trying to figure out the best way to do tooltips across all platforms. A callback-based approach works well for JS libraries, but hoping to come up with something that also works for Ruby and Python libraries.

[Ali-raza-khan]

Hi @ankane, is there any update for ruby on above ?