How to remove Extra space in the left side of the stockChart

[workingbuddy10]

• For the comparison series I am adding a new valueAxis. ( for more reference ENHANCEMENT Request : Comparison Series with new price scale #1592)
• And when user clicks on the close button I remove that valueAxis, which is getting removed.
• But the space created by the valueAxis is not getting removed.
  I tried to set the paddingLeft to 0 when user removes the series, that too didn't worked for me. this.chartInstance.stockChart.set("paddingLeft",0)

10.07.2024_04.59.04_REC.mp4

This is how I am removing the axis :

          if (axisType === 'New price scale') {
            comparisonPanel.yAxes.removeValue(comparisonYAxis);
            this.chartInstance.chartInstanceUpdateStore.triggerZoomToLastNPoints(this.chartInstance.data.length);
          }

Which property should I fire when the user closes the button to remove this extra space

[martynasma]

Try disposing the axis, too.

comparisonYAxis.dispose();

[workingbuddy10]

Nope @martynasma it didn't worked though it is disposing the axis but the space is there.

Full code of removing the aixs :

       // Add event listener to the close button to remove the y-axis
       let closeButton = comparisonSeries.get("legendDataItem").get("closeButton");
       if (closeButton && closeButton.events) {
        let originalClickListeners = closeButton.events._listeners.filter(listener => listener.type === 'click');
  
        closeButton.events.off('click');
  
        closeButton.events.on('click', (event) => {
          originalClickListeners.forEach(listener => {
            listener.callback.call(listener.context, event);
          });
  
          if (axisType === 'New price scale') {
            comparisonPanel.yAxes.removeValue(comparisonYAxis);
            comparisonYAxis.dispose();
          }        }); 
       } else {
         console.error("Unable to access closeButton or its events.");
       }

Below is the comparisonYAxis forming code :

    // Create a new yAxis if the axisType is 'New price scale'
    if (axisType === 'New price scale') {
      comparisonYAxisRenderer = am5xy.AxisRendererY.new(this.chartInstance.instance, {
        opposite: false,
        pan: "zoom",
        strokeOpacity: 0.5,
        strokeWidth: 1,
        stroke: am5.color("#474747"),
      });
      comparisonYAxisRenderer.grid.template.set("strokeOpacity", 0.05);
      comparisonYAxisRenderer.setAll({
        strokeOpacity: 1,
        opacity: 1,
      });
      comparisonYAxis = am5xy.ValueAxis.new(this.chartInstance.instance, {
        renderer: comparisonYAxisRenderer,
        syncWithAxis: this.chartInstance.valueAxis,
        opacity: 0.7,
        extraMin: 0.03,
        maxDeviation: 1,
        tooltip: am5.Tooltip.new(this.chartInstance.instance, {}),
        extraTooltipPrecision: 2,
      });
      comparisonYAxis.get("tooltip").get("background").set("fill", am5.color(AXIS_TOOLTIP_COLOR));
      comparisonYAxis.get("renderer").labels.template.setAll({ fontSize: 10 });
      comparisonYAxis.get("tooltip").label.setAll({ fontSize: 9 });
      comparisonYAxis?.get("renderer").thumb.states.create("hover", { fillOpacity: 0 });
      comparisonYAxis?.get("renderer").labels.template.setAll({
        paddingRight: 0
      });
      comparisonPanel.yAxes.push(comparisonYAxis);
    }

[martynasma]

Could you whip up a CodePen with the simplified version of what you do with the addition/removal?

[workingbuddy10]

Sure @martynasma
Codepen link : https://codepen.io/Ansh-m-the-reactor/pen/zYVvYRQ

Initially see the difference between the red border and the valueAxis ( where March 2021) written.
And after adding/removing the axis then see the difference between them.

15.07.2024_05.04.50_REC.mp4

I want to remove it without re-rendering the chart.

[workingbuddy10]

• In the same codepen @martynasma you can see the ticks are overlapping over the valueAxis of the comparison series. Which I don't want (i want to keep the ticks but without overlapping).

[workingbuddy10]

@martynasma Does this codepen helped you? Or should I provide anything else too..!

[martynasma]

Yes. You can "reclaim" the space via this line:

mainPanel.leftAxesContainer.set("minWidth", undefined)

[workingbuddy10]

Perfect @martynasma it worked! Thanks a lot.