lightning chart javascript single axis display chart formatting ticks and labels

Question

This is an axis display container that is used by multiple charts that are all synchronized. It accurately scrolls with new data. The trick was to use two y axis, include ticks on one, and include labels but no ticks on the other and then offset the axis slightly(very bottom of code).

1. I need to remove the chart that you can see on the left of the labels, its a thin gray rectangle. It interferes with the label placement at times.

2. how do I add a custom amount of space between tick lines, and move the label closer to the bottom left of the cell. The interval(maxY,minY) on this chart can be changed so Its more important to have a pixel size.

Hoping for a format like :

useEffect(() => {
    if (chartRef.current || !lcjs) return;
    const container = document.getElementById(id) as HTMLDivElement;

    const chart = lightningChart().ChartXY({
      container: container,
      // theme: 
      
    });

    chart
      .setTitleFillStyle(emptyFill) // removes extra padding used for title
      //.setPadding(0); //try to elimate as much of border as possible, still issue with sides/top
      //.setPadding({bottom:-15, left:-40}) 
      .setPadding({bottom:-15})
    // axis setup and initialization
    chart.getDefaultAxisY().dispose(); // Dispose unused default axis.
    chart.getDefaultAxisX().dispose();
    chart
      .setSeriesBackgroundFillStyle(emptyFill)
      //.setSeriesBackgroundStrokeStyle(emptyLine) // otherwise this goes on top of and overrides 'backgroundFillStyle'
      .setBackgroundFillStyle(
        new SolidFill({ color: ColorRGBA(2, 6, 23, 255) })
      )
      
    

      
      
        
    const baseAxisY = chart
      .addAxisY({opposite:true})
      .setScrollStrategy(undefined) //trick to synchronizing
      //.setVisible(false); // this removes option to show gridlines
        .setMouseInteractions(false)
        
      // ticks on axis line (connected to gridlines)
      .setTickStrategy(
        AxisTickStrategies.Numeric,
        (tickStrategy: NumericTickStrategy) =>
          tickStrategy
            //.setMinorTickStyle(emptyTick)

            .setMajorTickStyle(tickStyle =>
              tickStyle
              .setTickStyle(new SolidLine({ 
                thickness: 1, // Adjust the thickness as needed
                fillStyle: new SolidFill({ color: ColorHEX('#FFFFFF') }) // Set the color as needed
              }))
              .setTickLength(70).setTickPadding(-70
                ) // Set the tick length in pixels as needed
          
                
            

                .setLabelFillStyle(emptyFill)
                
                .setGridStrokeStyle(emptyLine
                )
            )
            .setMinorTickStyle(tickStyle =>
              tickStyle
              .setTickStyle(new SolidLine({ 
                thickness: 1, // Adjust the thickness as needed
                fillStyle: new SolidFill({ color: ColorHEX('#FFFFFF') }) // Set the color as needed
              })).setTickLength(70).setTickPadding(-70)
                
            
                .setLabelFillStyle(emptyFill)
               
                .setGridStrokeStyle(emptyLine
                )
            )
      )

      //actual axis line
      
      .setStrokeStyle(
        new SolidLine({
          thickness: 0, // this seems to work best making it invisible
        })
      )
      
      
      ;
    
    
    yAxisRef.current = baseAxisY;

   

    // removes shadow on '1' digits
    const customFormattingFunction = (value, range, locale) => {
      return value.toString(); // Convert the numeric value directly to a string
    };

    const baseAxisY2 = chart
      .addAxisY({opposite:true})//.addCustomTick
      .setScrollStrategy(undefined) //trick to synchronizing
      //.setVisible(false); // this removes option to show gridlines
        .setMouseInteractions(false)
        
      // ticks on axis line (connected to gridlines)
      .setTickStrategy(
        AxisTickStrategies.Numeric,
        (tickStrategy: NumericTickStrategy) =>
          tickStrategy
            
            .setMajorFormattingFunction(customFormattingFunction)
            .setMinorFormattingFunction(customFormattingFunction)
            

            .setMajorTickStyle(tickStyle =>
              tickStyle
              
              
                .setTickStyle(emptyLine)
                
               
                 .setLabelFillStyle(new SolidFill({ color: ColorHEX('#FFFFFF') })) // Example to set label color to red
               
                .setLabelPadding(-60)
                .setGridStrokeStyle(emptyLine
                )
            )
            .setMinorTickStyle(tickStyle =>
              tickStyle
              
                .setTickStyle(emptyLine)
                
                
                .setLabelFillStyle(new SolidFill({ color: ColorHEX('#FFFFFF') })) 
            

                
                .setGridStrokeStyle(emptyLine)
            )
      )

      //actual axis line
      
      .setStrokeStyle(
        new SolidLine({
          thickness: 0, // this seems to work best making it invisible
        })
      )
      ;

      yAxisRef2.current = baseAxisY2;
    chartRef.current = chart;

  const updateChartData = (newData: Measurement) => {
    console.debug("update axis chart container")
    let yMin = 0;
    const activeSeries = seriesRefs.current.activeSeries;


            const currentBounds = getNewAxisBoundsRef();
            yAxisRef.current?.setInterval({
              start: currentBounds[0],
              end: currentBounds[1],
              stopAxisAfter: false,
            });
            yAxisRef2.current?.setInterval({
              start: currentBounds[0] +5, // places labels between other axis tick marks
              end: currentBounds[1] + 5,
              stopAxisAfter: false,
            });
          

  };