Strange Characters (â€, â--) Appear in Highcharts and Stigg Components After Upgrading to Polaris 12

Technical Q&A

Topic summary

After upgrading from Polaris 11 to Polaris 12, strange characters are appearing in multiple components:

Affected Components:

  • Highcharts (v11.1.0): X-axis labels show “— and tooltips display “â–”
  • Stigg React SDK (v4.8.0): Text renders as “months/— and right-to-left marks (‏) appear as “‎”

Key Details:

  • Issue did not exist in Polaris 11
  • Data passed to components has been verified and does not contain these characters
  • Likely related to character encoding or text rendering changes in Polaris 12
  • Screenshots provided show the visual corruption

Status: The issue remains unresolved with no responses or solutions posted yet.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

I recently upgraded from Polaris 11 to Polaris 12 in my project. After the upgrade, I’m encountering strange character rendering issues across multiple components:

  1. Highcharts (v11.1.0):

    • X-axis category labels display characters like â€.
    • Tooltips render unexpected symbols like â–.

  2. Stigg React SDK (v4.8.0):

    • Text within the component, such as months, displays as months/â€.
    • ‏ in Polaris 11 is misinterpreted as ‎ in Polaris 12

This issue was not present with Polaris 11. It seems to be related to character encoding or text rendering changes introduced in Polaris 12. I’ve already verified the data being passed to Highcharts and Stigg components, and it does not include these characters.

Screenshot from 2025-01-04 17-15-59.png

Screenshot from 2025-01-04 17-15-44.png

Screenshot from 2025-01-04 12-53-05.png
Screenshot from 2025-01-04 12-53-05.png633×125 6.43 KB