Restricting the Bounds of the Bubble Map

[drskigen]

I am attempting to limit the Bounds of the bubble map to an area surrounding the bubble points, while still drawing countries regardless of whether they have a bubble point or not. Currently, it appears the bounds are set automatically by the Map outline value.

I see there are projectionScale and projectionOffset values, but setting those seems to cause an issue with the Chart context on redrawing. Example from my code:

const bounds =
    currentChart.scales.projection
        .outlineBounds;

// Calculate scale factor
const scaleFactor = Math.min(
    bounds.width / (maxLng - minLng),
    bounds.height / (maxLat - minLat)
);

// Calculate x and y translation offsets
const xOffset = scaleFactor * bounds.refX;
const yOffset = scaleFactor * bounds.refY;

config.options.scales.projection = {
    ...config.options.scales.projection,
    projectionScale: scaleFactor,
    projectionOffset: [xOffset, yOffset],
};

// Set chart type and populate new data.
config.type = 'bubbleMap';
config.data = countries[continent];

// Destroy old chart, necessary when switching chart type.
currentChart.destroy();

// Regenerate chart.
const newChart = new Chart(chartEl, config);

I am still working out the proper scaling, etc, but even with some arbitrary values like: projectionScale: 2, projectionOffset: [-50, 0],, I get the following error and the map points don't generate, even though the country features do:

Cannot read properties of null (reading 'getContext') from:

 function clearCanvas(canvas, ctx) {
      ctx = ctx || canvas.getContext('2d');
      ctx.save();
      ctx.resetTransform();
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.restore();
  }

I should note that the code works fine if I don't try to change the projectionScale or projectionOffset.

Am I doing something incorrect? And / or is there a better way to limit the map boundaries?

Thank you!

Context

• Version: 4.1.2
• Browser: Chrome

[drskigen]

Apologies, please disregard. The issue appears to be that I had imported the geoEquirectangular() projection from d3 to test some custom transformations. Once I switched to the chartjs-chart-geo projection equirectangular it fixed my issue.