Not Aligning Label Component in Bar Chart Rendering via Portal

[Satyam7Jha]

Description

In the provided example, we implemented a column chart where the label component was rendered with proper alignment. However, when we switched the chart type from column to bar, the label component no longer aligned correctly.

Steps to reproduce

1. Set up a column chart as described in the linked example.
2. Observe how the label component is correctly aligned.
3. Change the chart type from column to bar.
4. Note that the label component fails to align properly exapmle.

Expected Behavior

When changing the chart type from column to bar, the label component should remain properly aligned, similar to the column chart rendering.

Actual Behavior

In the bar chart rendering, the label component is not properly aligned.

Relevant Screenshots

Aligned in Column

NotAligned in Bar

[ppotaczek]

Hi @Satyam7Jha,

Thank you for contacting us!

Please note that rendering custom HTML by using React portals is an experimental feature and it is not officially supported.

To make the labels properly aligned, you can add the below style:

<Fragment>
  {createPortal(
    <div style={{ transform: "translateY(-50%)" }}>
      <div>React</div>
      {tick.pos}
    </div>,
    tick.label.element
  )}
</Fragment>

Live demo: https://codesandbox.io/s/highcharts-react-demo-1-9s7pyq?file=/demo.jsx

Best regards!

[Satyam7Jha]

Hey, @ppotaczek, I truly appreciate your assistance. Your solution worked perfectly.

I was wondering, will Highcharts implement the capability to render custom JSX components in the foreseeable future? This feature could be significantly beneficial.

[ppotaczek]

Hi @Satyam7Jha, It's hard to say, as far as I know, it is not planned in the near future. Such implementation could be complex and complicated. Related thread here: #23