chart js format only 2 axis lines and not the all grid lines

Question

Is it possible in chart js

1. display grid lines - while formatting different only the 2 main axis lines. x-axis (y=0) and y-axis(x=0).

2. in y axis - set different color for y ticks values: red for negative values, gray for the positive values.

for both issues - can not find an answer.
I also asked Chat GPT - but according to GPT answer, which was not clear nor refer the EXACT question - I assume it is not possible.
But maybe i didn't know how to ask.

3. also checked here and here and here

4. the chart image shows what i want to change
   the circled green lines the circled numbers within the yellow

5. current code

const settings = {

      type: 'line', // Line chart
      data: getEmptyChartData(), // Datasets settings
      options: {
          responsive: true,
          plugins: {
            legend: {
              display: true,
              position: "top",
              labels: {
                  font:{size: "19rem", weight: 'italic', padding: 10},
                  color: chartTextColr, // Legend text color
              },
          },
              zoom: {
                  pan: {
                      enabled: true,  // Enable panning
                      mode: 'xy',  // Enable panning in both directions
                      threshold: 0,  // Allow immediate panning
                      rangeMin: {
                        x: 0 // Prevents panning to negative X
                      },
                      // rangeMax: {
                      //   x: 100 // Example: Prevents panning beyond X = 100
                      // }
                      // onPanStart: function (chart, event, point) {
                      //     console.log('Pan started:', chart, event, point);
                      // },
                      // onPanRejected: function (chart, event) {
                      //     console.log('Pan rejected:', chart, event);
                      // },
                  },
                  zoom: {
                      wheel: {
                          enabled: true,  // Enable zooming with mouse wheel
                      },
                      mode: 'xy',  // Enable zooming in both directions
                  },
                  decimation: {
                    enabled: true,
                    algorithm: 'lttb',
                    samples: 20 // Number of data points to keep after zooming
                }
              },
          },
          scales: {
            x: {
                type: 'linear', // Specify linear X-axis
                position: 'bottom',
                min: 0,
                title: {display: true, text: 'Price', color: chartTextColr, font: fontSettings},
                grid: {
                  //color: chartGridLineColor, // Regular grid lines color
                  color: "red", // Regular grid lines color
                  borderColor: 'red', // X-axis (y = 0) line emphasized
                  borderWidth: 2,
                  tickColor: "green"
                },
                ticks: {color: chartTicksColor, 
                        major: {enable: true, color: "blue"}},
            },
            y: {
                title: {display: true, text: 'PnL', color: chartTextColr, font: fontSettings},
                grid: {color: chartGridLineColor },
                ticks: {color: chartTicksColor},               
            },
        },
      }
  };

Answer 1

You can provide a function to the grid.color option and return a color based on the grid context value.

Check the below example. Here if the axis value is greater than 0, then grid line will be green colored. Else if it is less than 0, then the grid line color will be red. And y=0 line will be black colored.

    y: {
        ...
        grid: {
            color: function(context) {
                if (context.tick.value > 0) {
                  return Utils.CHART_COLORS.green;
                } else if (context.tick.value < 0) {
                  return Utils.CHART_COLORS.red;
                }
    
                return '#000000';
              },
          },
        ...
    }