My map from Brazil doesn't appears on screen

[Siqm]

Hello!

I'm encountering difficulty getting my map to display on the canvas. I apologize if I've made an error, but I've been struggling to resolve this issue and it's driving me a bit crazy. Any assistance would be greatly appreciated.

Screenshots / Sketches

createGeoChart() {
    fetch(
      "https://raw.githubusercontent.com/markmarkoh/datamaps/master/src/js/data/bra.topo.json"
    )
      .then(r => r.json())
      .then(br => {
        var geoData = (ChartGeo.topojson.feature(br, br.objects.bra) as any).features;

        for (let i in geoData) {
          geoData[i].properties.confirmed = Math.random();
          geoData[i].properties.deaths = Math.random();
        }

        console.log('geoData', geoData);

        let dts = {
          labels: geoData.map(i => i.properties.name),
          datasets: [
            {
              // outline: geoData,
              data: geoData.map(i => ({
                feature: i,
                value: i.properties.confirmed
              }))
            }
          ]
        };

        let configOptions = {
          maintainAspectRatio: true,
          responsive: true,
          showOutline: false,
          showGraticule: false,
          legend: {
            display: false
          },
          scale: {
            axis: 'x',
            projection: ChartGeo.geoEqualEarth()
          } as any,
          geo: {
            colorScale: {
              display: true,
              interpolate: "reds",
              missing: "white",
              legend: {
                display: "true",
                position: "bottom-right"
              }
            }
          }
        };

        Chart.register(ChartGeo.ChoroplethController, ChartGeo.GeoFeature, ChartGeo.ColorScale, ChartGeo.ProjectionScale);
        new Chart(
          <HTMLCanvasElement>document.getElementById("graphic-pie-canvas"),
          {
            type: "choropleth",
            data: dts,
            options: configOptions
          }
        );
      });
  }

Context This is on Angular

• Version: 4.3.0
• chart.js: 4.4.2
• Browser: Google Chrome

[stockiNail]

@Siqm your chart configuration has got some mistakes.

Here is a codepen, using your code but fixing misconfig: https://codepen.io/stockinail/pen/ExJWLKE

Hopefully it is what you are looking for.

Picture:

[Siqm]

@stockiNail Thank you very much for your assistance; it was invaluable, and now my chart is successfully displayed on the screen. However, I encountered a few hurdles during the process. As mentioned earlier, I'm utilizing Angular, which required some adjustments on my end.

Firstly, I encountered an issue where hovering over a state didn't display its name and corresponding value, as yours does. I'd appreciate guidance on implementing this functionality correctly.

Secondly, I'm interested in customizing the colors of the chart. Specifically, I aim to assign specific hex values ​​such as "#00ff00" for one condition, "#ff0000" for another, and "#0000ff" when there's no data available. Could you please advise me on how to achieve this? I'm unsure if it's feasible within the framework.

I'm attaching a file with how the hover looks like and heres the code:

getChart() {
    let brJson = brazilTopojson as any
    var geoData = (ChartGeo.topojson.feature(brJson, brJson.objects.bra) as any).features;
    let canvas = document.getElementById("graphic-pie-canvas") as HTMLCanvasElement;
    const ctx = canvas.getContext('2d');
    ctx?.clearRect(0, 0, canvas.width, canvas.height);

    for (let i in geoData) {
      geoData[i].properties.confirmed = Math.random();
      geoData[i].properties.deaths = Math.random();
    }

    let dts = {
      labels: geoData.map((i) => i.properties.name),
      datasets: [
        {
          outline: geoData,
          data: geoData.map((i) => ({
            feature: i,
            value: i.properties.confirmed,
          })),
        },
      ],
    };

    let configOptions: any = {
      responsive: true,
      showOutline: false,
      showGraticule: false,
      plugins: {
        legend: {
          display: false,
        },
      },
      scales: {
        projection: {
          axis: 'x',
        projection: "equalEarth",
        },
        color: {
          axis: 'x',
          interpolate: "reds",
          missing: "white",
          legend: {
            display: "true",
            position: "bottom-right",
          },
        },
      },
    };

    Chart.register(ChartGeo.ChoroplethController, ChartGeo.ProjectionScale, ChartGeo.ColorScale, ChartGeo.GeoFeature)
    const myChart = new Chart(ctx, {
      type: "choropleth",
      data: dts,
      options: configOptions,
    });
  }

The brazilTopojson varible is the file from this git

[stockiNail]

Firstly, I encountered an issue where hovering over a state didn't display its name and corresponding value, as yours does. I'd appreciate guidance on implementing this functionality correctly.

I'm not an Angular expert.. sounds weird...

Secondly, I'm interested in customizing the colors of the chart. Specifically, I aim to assign specific hex values ​​such as "#00ff00" for one condition, "#ff0000" for another, and "#0000ff" when there's no data available. Could you please advise me on how to achieve this? I'm unsure if it's feasible within the framework.

You can use interpolate opiton as scriptable option. See an example here: https://github.com/sgratzl/chartjs-chart-geo/blob/c08bc7bbdccdb11bc064acf51c2d2dc68cb4576c/docs/examples/custom.ts#L16