title: Tick labels overlap when there is a gridline between them
body: <p>When tick labels are in their own chart, Highcharts effectively position ticks not to overlap. However, when tick labels come from separate charts side by side, tick labels do not follow the same rules and end up overlapping. What I'd like to know is if there's a way to 1) correct this so that they do not overlap through some setting, or 2) <em>easily</em> (I'd like to avoid overriding Highcharts tick positioning calculations) manually position ticks so they are positioned at the start and end of each chart and have padding so they are 10px (or something?) inside of the edge of the gridlines (but still outside the chart).</p>
  <p><a href="https://i.stack.imgur.com/chW8d.png" rel="nofollow noreferrer">Here's a sketch of what I'd like to happen</a></p>
  <p>Working demo with an example of the &quot;bug&quot; on the Y-axis: <a href="https://jsfiddle.net/zenzizen/ubgm5hnc/" rel="nofollow noreferrer">Fiddle</a></p>
  <pre><code>let drawnPlotlines = false;
  let adjustedPanelDimensions = false;
  const colCount = 4;
  const rowCount = 4;
  
  const options = {
    &quot;chart&quot;: {
          width: 500,
          height: 500,
      &quot;animation&quot;: false,
      &quot;events&quot;: {
        render: function() {
          const chart = this;
          if (drawnPlotlines) {
            return;
          }
  
          if (!adjustedPanelDimensions) {
            let redraw = false;
            if (Math.ceil(chart.plotWidth / colCount) &lt; 100.0) {
              redraw = true;
              chart.update({
                xAxis: [...options.xAxis.map((axis, column) =&gt; ({
                  ...axis,
                  width: 100,
                  left: column * 100 + chart.plotLeft,
                })), {
                  id: 'xScrollAxis',
                  left: chart.plotLeft,
                  scrollbar: {
                    enabled: true
                  },
                  width: 100 * colCount,
                }]
              }, false);
            }
            if (Math.ceil(chart.plotHeight / rowCount) &lt; 100.0) {
              redraw = true;
              chart.update({
                yAxis: [...options.yAxis.map((axis, row) =&gt; ({
                  ...axis,
                  height: 100,
                  top: row * 100 + chart.plotTop,
                })), {
                  id: 'yScrollAxis',
                  scrollbar: {
                    enabled: true
                  },
                  top: chart.plotTop,
                  height: 100 * rowCount,
                }]
              }, false);
            }
            adjustedPanelDimensions = true;
            if (redraw) {
              chart.redraw(false);
              return;
            }
          }
  
          const xAxes = chart.xAxis.filter(axis =&gt; axis.id !== 'xScrollAxis');
          const yAxes = chart.yAxis.filter(axis =&gt; axis.id !== 'yScrollAxis');
          xAxes.forEach(axis =&gt;
            axis.addPlotLine({
              color: '#ccd6eb',
              width: 1,
              value: Number.isFinite(axis.userMax) ? axis.userMax : axis.max
            })
          );
          yAxes.forEach(axis =&gt;
            axis.addPlotLine({
              color: '#ccd6eb',
              width: 1,
              value: Number.isFinite(axis.userMax) ? axis.userMax : axis.max
            })
          );
          drawnPlotlines = true;
          chart.redraw(false);
        }
      },
      &quot;type&quot;: &quot;scatter&quot;
    },
    &quot;credits&quot;: {
      &quot;enabled&quot;: false
    },
    &quot;exporting&quot;: {
      &quot;enabled&quot;: false
    },
    &quot;plotOptions&quot;: {
      &quot;series&quot;: {
        &quot;animation&quot;: false
      }
    },
    &quot;title&quot;: {
      &quot;text&quot;: &quot;Matrix Plot of C1, C2, C3, C4&quot;
    },
    &quot;yAxis&quot;: [{
        &quot;gridLineWidth&quot;: 0,
        &quot;lineWidth&quot;: 1,
        &quot;offset&quot;: 0,
        &quot;crosshair&quot;: true,
        &quot;height&quot;: &quot;25%&quot;,
        &quot;top&quot;: &quot;0%&quot;,
        &quot;title&quot;: {
          &quot;enabled&quot;: false,
          &quot;rotation&quot;: 0,
          &quot;style&quot;: {
            &quot;textOverflow&quot;: &quot;ellipsis&quot;,
            &quot;whiteSpace&quot;: &quot;nowrap&quot;
          },
          &quot;text&quot;: &quot;C1&quot;
        }
      },
      {
        &quot;gridLineWidth&quot;: 0,
        &quot;lineWidth&quot;: 1,
        &quot;offset&quot;: 0,
        &quot;crosshair&quot;: true,
        &quot;height&quot;: &quot;25%&quot;,
        &quot;top&quot;: &quot;25%&quot;,
        &quot;title&quot;: {
          &quot;enabled&quot;: false,
          &quot;rotation&quot;: 0,
          &quot;style&quot;: {
            &quot;textOverflow&quot;: &quot;ellipsis&quot;,
            &quot;whiteSpace&quot;: &quot;nowrap&quot;
          },
          &quot;text&quot;: &quot;C2&quot;
        }
      },
      {
        &quot;gridLineWidth&quot;: 0,
        &quot;lineWidth&quot;: 1,
        &quot;offset&quot;: 0,
        &quot;crosshair&quot;: true,
        &quot;height&quot;: &quot;25%&quot;,
        &quot;top&quot;: &quot;50%&quot;,
        &quot;title&quot;: {
          &quot;enabled&quot;: false,
          &quot;rotation&quot;: 0,
          &quot;style&quot;: {
            &quot;textOverflow&quot;: &quot;ellipsis&quot;,
            &quot;whiteSpace&quot;: &quot;nowrap&quot;
          },
          &quot;text&quot;: &quot;C3&quot;
        }
      },
      {
        &quot;gridLineWidth&quot;: 0,
        &quot;lineWidth&quot;: 1,
        &quot;offset&quot;: 0,
        &quot;crosshair&quot;: true,
        &quot;height&quot;: &quot;25%&quot;,
        &quot;top&quot;: &quot;75%&quot;,
        &quot;title&quot;: {
          &quot;enabled&quot;: false,
          &quot;rotation&quot;: 0,
          &quot;style&quot;: {
            &quot;textOverflow&quot;: &quot;ellipsis&quot;,
            &quot;whiteSpace&quot;: &quot;nowrap&quot;
          },
          &quot;text&quot;: &quot;C4&quot;
        }
      }
    ],
    &quot;xAxis&quot;: [{
        &quot;gridLineWidth&quot;: 0,
        &quot;lineWidth&quot;: 1,
        &quot;offset&quot;: 0,
        &quot;crosshair&quot;: true,
        &quot;width&quot;: &quot;25%&quot;,
        &quot;left&quot;: &quot;0%&quot;,
        &quot;title&quot;: {
          &quot;enabled&quot;: true,
          &quot;style&quot;: {
            &quot;textOverflow&quot;: &quot;ellipsis&quot;,
            &quot;whiteSpace&quot;: &quot;nowrap&quot;
          },
          &quot;text&quot;: &quot;C1&quot;
        }
      },
      {
        &quot;gridLineWidth&quot;: 0,
        &quot;lineWidth&quot;: 1,
        &quot;offset&quot;: 0,
        &quot;crosshair&quot;: true,
        &quot;width&quot;: &quot;25%&quot;,
        &quot;left&quot;: &quot;25%&quot;,
        &quot;title&quot;: {
          &quot;enabled&quot;: true,
          &quot;style&quot;: {
            &quot;textOverflow&quot;: &quot;ellipsis&quot;,
            &quot;whiteSpace&quot;: &quot;nowrap&quot;
          },
          &quot;text&quot;: &quot;C2&quot;
        }
      },
      {
        &quot;gridLineWidth&quot;: 0,
        &quot;lineWidth&quot;: 1,
        &quot;offset&quot;: 0,
        &quot;crosshair&quot;: true,
        &quot;width&quot;: &quot;25%&quot;,
        &quot;left&quot;: &quot;50%&quot;,
        &quot;title&quot;: {
          &quot;enabled&quot;: true,
          &quot;style&quot;: {
            &quot;textOverflow&quot;: &quot;ellipsis&quot;,
            &quot;whiteSpace&quot;: &quot;nowrap&quot;
          },
          &quot;text&quot;: &quot;C3&quot;
        }
      },
      {
        &quot;gridLineWidth&quot;: 0,
        &quot;lineWidth&quot;: 1,
        &quot;offset&quot;: 0,
        &quot;crosshair&quot;: true,
        &quot;width&quot;: &quot;25%&quot;,
        &quot;left&quot;: &quot;75%&quot;,
        &quot;title&quot;: {
          &quot;enabled&quot;: true,
          &quot;style&quot;: {
            &quot;textOverflow&quot;: &quot;ellipsis&quot;,
            &quot;whiteSpace&quot;: &quot;nowrap&quot;
          },
          &quot;text&quot;: &quot;C4&quot;
        }
      }
    ],
    &quot;series&quot;: [{
        &quot;data&quot;: [],
        &quot;yAxis&quot;: 0,
        &quot;xAxis&quot;: 0,
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [
          [
            1,
            5
          ],
          [
            5,
            10
          ],
          [
            6,
            10
          ],
          [
            6,
            10
          ],
          [
            10,
            3
          ],
          [
            8,
            6
          ],
          [
            6,
            3
          ],
          [
            6,
            5
          ],
          [
            10,
            2
          ],
          [
            8,
            7
          ]
        ],
        &quot;name&quot;: &quot;R1 C0&quot;,
        &quot;xAxis&quot;: 0,
        &quot;yAxis&quot;: 1,
        &quot;color&quot;: &quot;#7cb5ec&quot;,
        &quot;marker&quot;: {
          &quot;radius&quot;: 2.375,
          &quot;symbol&quot;: &quot;circle&quot;
        },
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [
          [
            1,
            1
          ],
          [
            5,
            2
          ],
          [
            6,
            10
          ],
          [
            6,
            4
          ],
          [
            10,
            7
          ],
          [
            8,
            5
          ],
          [
            6,
            8
          ],
          [
            6,
            8
          ],
          [
            10,
            4
          ],
          [
            8,
            4
          ]
        ],
        &quot;name&quot;: &quot;R2 C0&quot;,
        &quot;xAxis&quot;: 0,
        &quot;yAxis&quot;: 2,
        &quot;color&quot;: &quot;#7cb5ec&quot;,
        &quot;marker&quot;: {
          &quot;radius&quot;: 2.375,
          &quot;symbol&quot;: &quot;circle&quot;
        },
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [
          [
            1,
            9
          ],
          [
            5,
            5
          ],
          [
            6,
            10
          ],
          [
            6,
            8
          ],
          [
            10,
            3
          ],
          [
            8,
            1
          ],
          [
            6,
            7
          ],
          [
            6,
            6
          ],
          [
            10,
            5
          ],
          [
            8,
            8
          ]
        ],
        &quot;name&quot;: &quot;R3 C0&quot;,
        &quot;xAxis&quot;: 0,
        &quot;yAxis&quot;: 3,
        &quot;color&quot;: &quot;#7cb5ec&quot;,
        &quot;marker&quot;: {
          &quot;radius&quot;: 2.375,
          &quot;symbol&quot;: &quot;circle&quot;
        },
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [
          [
            5,
            1
          ],
          [
            10,
            5
          ],
          [
            10,
            6
          ],
          [
            10,
            6
          ],
          [
            3,
            10
          ],
          [
            6,
            8
          ],
          [
            3,
            6
          ],
          [
            5,
            6
          ],
          [
            2,
            10
          ],
          [
            7,
            8
          ]
        ],
        &quot;name&quot;: &quot;R0 C1&quot;,
        &quot;xAxis&quot;: 1,
        &quot;yAxis&quot;: 0,
        &quot;color&quot;: &quot;#7cb5ec&quot;,
        &quot;marker&quot;: {
          &quot;radius&quot;: 2.375,
          &quot;symbol&quot;: &quot;circle&quot;
        },
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [],
        &quot;yAxis&quot;: 1,
        &quot;xAxis&quot;: 1,
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [
          [
            5,
            1
          ],
          [
            10,
            2
          ],
          [
            10,
            10
          ],
          [
            10,
            4
          ],
          [
            3,
            7
          ],
          [
            6,
            5
          ],
          [
            3,
            8
          ],
          [
            5,
            8
          ],
          [
            2,
            4
          ],
          [
            7,
            4
          ]
        ],
        &quot;name&quot;: &quot;R2 C1&quot;,
        &quot;xAxis&quot;: 1,
        &quot;yAxis&quot;: 2,
        &quot;color&quot;: &quot;#7cb5ec&quot;,
        &quot;marker&quot;: {
          &quot;radius&quot;: 2.375,
          &quot;symbol&quot;: &quot;circle&quot;
        },
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [
          [
            5,
            9
          ],
          [
            10,
            5
          ],
          [
            10,
            10
          ],
          [
            10,
            8
          ],
          [
            3,
            3
          ],
          [
            6,
            1
          ],
          [
            3,
            7
          ],
          [
            5,
            6
          ],
          [
            2,
            5
          ],
          [
            7,
            8
          ]
        ],
        &quot;name&quot;: &quot;R3 C1&quot;,
        &quot;xAxis&quot;: 1,
        &quot;yAxis&quot;: 3,
        &quot;color&quot;: &quot;#7cb5ec&quot;,
        &quot;marker&quot;: {
          &quot;radius&quot;: 2.375,
          &quot;symbol&quot;: &quot;circle&quot;
        },
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [
          [
            1,
            1
          ],
          [
            2,
            5
          ],
          [
            10,
            6
          ],
          [
            4,
            6
          ],
          [
            7,
            10
          ],
          [
            5,
            8
          ],
          [
            8,
            6
          ],
          [
            8,
            6
          ],
          [
            4,
            10
          ],
          [
            4,
            8
          ]
        ],
        &quot;name&quot;: &quot;R0 C2&quot;,
        &quot;xAxis&quot;: 2,
        &quot;yAxis&quot;: 0,
        &quot;color&quot;: &quot;#7cb5ec&quot;,
        &quot;marker&quot;: {
          &quot;radius&quot;: 2.375,
          &quot;symbol&quot;: &quot;circle&quot;
        },
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [
          [
            1,
            5
          ],
          [
            2,
            10
          ],
          [
            10,
            10
          ],
          [
            4,
            10
          ],
          [
            7,
            3
          ],
          [
            5,
            6
          ],
          [
            8,
            3
          ],
          [
            8,
            5
          ],
          [
            4,
            2
          ],
          [
            4,
            7
          ]
        ],
        &quot;name&quot;: &quot;R1 C2&quot;,
        &quot;xAxis&quot;: 2,
        &quot;yAxis&quot;: 1,
        &quot;color&quot;: &quot;#7cb5ec&quot;,
        &quot;marker&quot;: {
          &quot;radius&quot;: 2.375,
          &quot;symbol&quot;: &quot;circle&quot;
        },
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [],
        &quot;yAxis&quot;: 2,
        &quot;xAxis&quot;: 2,
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [
          [
            1,
            9
          ],
          [
            2,
            5
          ],
          [
            10,
            10
          ],
          [
            4,
            8
          ],
          [
            7,
            3
          ],
          [
            5,
            1
          ],
          [
            8,
            7
          ],
          [
            8,
            6
          ],
          [
            4,
            5
          ],
          [
            4,
            8
          ]
        ],
        &quot;name&quot;: &quot;R3 C2&quot;,
        &quot;xAxis&quot;: 2,
        &quot;yAxis&quot;: 3,
        &quot;color&quot;: &quot;#7cb5ec&quot;,
        &quot;marker&quot;: {
          &quot;radius&quot;: 2.375,
          &quot;symbol&quot;: &quot;circle&quot;
        },
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [
          [
            9,
            1
          ],
          [
            5,
            5
          ],
          [
            10,
            6
          ],
          [
            8,
            6
          ],
          [
            3,
            10
          ],
          [
            1,
            8
          ],
          [
            7,
            6
          ],
          [
            6,
            6
          ],
          [
            5,
            10
          ],
          [
            8,
            8
          ]
        ],
        &quot;name&quot;: &quot;R0 C3&quot;,
        &quot;xAxis&quot;: 3,
        &quot;yAxis&quot;: 0,
        &quot;color&quot;: &quot;#7cb5ec&quot;,
        &quot;marker&quot;: {
          &quot;radius&quot;: 2.375,
          &quot;symbol&quot;: &quot;circle&quot;
        },
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [
          [
            9,
            5
          ],
          [
            5,
            10
          ],
          [
            10,
            10
          ],
          [
            8,
            10
          ],
          [
            3,
            3
          ],
          [
            1,
            6
          ],
          [
            7,
            3
          ],
          [
            6,
            5
          ],
          [
            5,
            2
          ],
          [
            8,
            7
          ]
        ],
        &quot;name&quot;: &quot;R1 C3&quot;,
        &quot;xAxis&quot;: 3,
        &quot;yAxis&quot;: 1,
        &quot;color&quot;: &quot;#7cb5ec&quot;,
        &quot;marker&quot;: {
          &quot;radius&quot;: 2.375,
          &quot;symbol&quot;: &quot;circle&quot;
        },
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [
          [
            9,
            1
          ],
          [
            5,
            2
          ],
          [
            10,
            10
          ],
          [
            8,
            4
          ],
          [
            3,
            7
          ],
          [
            1,
            5
          ],
          [
            7,
            8
          ],
          [
            6,
            8
          ],
          [
            5,
            4
          ],
          [
            8,
            4
          ]
        ],
        &quot;name&quot;: &quot;R2 C3&quot;,
        &quot;xAxis&quot;: 3,
        &quot;yAxis&quot;: 2,
        &quot;color&quot;: &quot;#7cb5ec&quot;,
        &quot;marker&quot;: {
          &quot;radius&quot;: 2.375,
          &quot;symbol&quot;: &quot;circle&quot;
        },
        &quot;showInLegend&quot;: false
      },
      {
        &quot;data&quot;: [],
        &quot;yAxis&quot;: 3,
        &quot;xAxis&quot;: 3,
        &quot;showInLegend&quot;: false
      }
    ]
  };
  
  Highcharts.chart('container', options);
  </code></pre>