HighMap data label is shown rotated

Question

I tried to display some map results in JustPy, but HighMap data labels in JustPy show as rotated, but only the label is roated not the map itself.

import justpy as jp

my_chart_def = """
{
 chart: {
    map: 'custom/europe',
    borderWidth: 1
  },

  title: {
    text: 'Nordic countries'
  },

  subtitle: {
    text: 'Demo of drawing all areas in the map, only highlighting partial data'
  },

  legend: {
    enabled: false
  },

  series: [{
    name: 'Country',
    data: [
      ['is', 1],
      ['no', 1],
      ['se', 1],
      ['dk', 1],
      ['fi', 1]
    ],
    dataLabels: {
            enabled: true,
            color: '#FFFFFF'
        },
    }]
}
"""

def chart_test():
    wp = jp.WebPage()
    wp.head_html = """
    <script src="https://code.highcharts.com/maps/9.2.2/highmaps.js"></script>
    <script src="https://code.highcharts.com/mapdata/custom/europe.js"></script>
    """
    my_chart = jp.HighCharts(a=wp, classes='m-2 p-2 border w-1/2 h-screen', options=my_chart_def)
    my_chart.options.chart.type = 'map'
    my_chart.options.series[0].name = 'Test chart'
    my_chart.options.title.text = 'Data'
    return wp

jp.justpy(chart_test)

This is what I got:

If I rotate the map 90 degrees, this is what I see, and the label seems aligned

Answer 1

I've reproduced your example in the editor, and everything seems to be correct https://jsfiddle.net/BlackLabel/6g92m7br/, so the issue occurs from the justpy side.

However, since 9.3.0 Highcharts Maps has improved geometry https://www.highcharts.com/blog/changelog/#highcharts-maps-v9.3.0, which could have affected another framework's behaviour. I would suggest reaching out JustPy developers directly.

As a workaround, you can try to play around with setting x, y dataLabels positions, e.g:

  plotOptions: {
    series: {
      dataLabels: {
        x: 15,
        y: -50
      }
    }
  }

Demo: https://jsfiddle.net/BlackLabel/bnejx2kc/

API Reference: https://api.highcharts.com/highmaps/plotOptions.map.dataLabels.x https://api.highcharts.com/highmaps/plotOptions.map.dataLabels.y