Map of Europe

[Tireur2cables]

Hi, I want to display a map of Europe. I'm having the following question, I have seen the closed issue on this subject but the link you used in your CodePen does not work anymore. You also provide another link, but I can't manage to display the map with it. To be more precise, I can load the chart with all the data, but there is nothing rendered but the scale. It is even stranger that I tested the same code with the topojson you use in your examples with the USA and it worked perfectly. Do you think the topojson I am using is cursed, or maybe I need to parse it differently ? As a reminder, the topojson of Europe is from this repository

Screenshots / Sketches

Here are the options I give to my ChoroplethChart and how I load the data :

  import europe from '../mapData/europe.json';
  const ue = europe as any;
  const states = (ChartGeo.topojson.feature(ue, ue.objects.europe) as any).features as any[];
  const config = {
      data: {
          labels: states.map((d) => d.properties.NAME),
          datasets: [{
              data: states.map((d) => ({feature: d, value: Math.random() * 10})),
          }]
      },
      options: {
          plugins: {
              legend: {
                  display: false
              },
          },
          scales: {
              projection: {
                  axis: 'x',
                  projection: 'equirectangular ' 
              },
              color: {
                  axis: 'x',
                  quantize: 5,
                  legend: {
                      position: 'bottom-right',
                      align: 'bottom'
                  },
              }
          },
      }
  };

Context

• Version: 4.2.7
• Browser: chrome (edge)

[Tireur2cables]

For those having the same issue, the map is correctly displayed when using this code :

    import europe from '@assets/mapData/europe.json';
    import { topojson, IGeoDataPoint, ChoroplethChart } from 'chartjs-chart-geo';
    const canvas = ref<HTMLCanvasElement | undefined>();
    const states = (topojson.feature(europe as any, europe.objects.europe as any) as any).features;
    const config = ref<ChartConfiguration<'choropleth', IGeoDataPoint[], string[]>>({
        type: 'choropleth',
        data: {
            labels: states.map((d : any) => d.properties.NAME),
            datasets: [{
                label: "Europe",
                data: states.map((d : any) => ({feature: d, value: Math.random() * 10})),
            }]
        },
        options: {
            plugins: {
                legend: {
                    display: false
                },
            },
            showGraticule: true,
            scales: {
                projection: {
                    axis: 'x',
                    projection: 'mercator',
                    projectionScale: 7,
                },
                color: {
                    axis: 'x',
                    quantize: 5,
                    legend: {
                        position: 'bottom-right',
                        align: 'bottom'
                    },
                }
            },
        }
    });
    onMounted(() => {
        if (canvas.value) new ChoroplethChart(canvas.value, config.value);
    });

So data is correct, it was just a bad parsing of the data I think :)