message: Monitoring Dashboards: Fix X axis tick labels overlapping
  When graphs are small, the X axis tick labels were overlapping. This
  fixes that by changing the label font size and angle at small widths.
diff: @@ -265,6 +265,18 @@ const Graph: React.FC<GraphProps> = React.memo(
  const xTickFormat = span < 5 * 60 * 1000 ? twentyFourHourTimeWithSeconds : twentyFourHourTime;
  + let xAxisStyle;
  + if (width < 225) {
  + xAxisStyle = {
  + tickLabels: {
  + angle: 45,
  + fontSize: 10,
  + textAnchor: 'start',
  + verticalAnchor: 'middle',
  + },
  + };
  + }
  +
  const legendData = formatLegendLabel
  ? _.flatMap(allSeries, (series, i) =>
  _.map(series, (s) => ({ name: formatLegendLabel(s[0], i) })),
  @@ -283,7 +295,7 @@ const Graph: React.FC<GraphProps> = React.memo(
  theme={chartTheme}
  width={width}
  >
  - <ChartAxis tickCount={5} tickFormat={xTickFormat} />
  + <ChartAxis style={xAxisStyle} tickCount={5} tickFormat={xTickFormat} />
  <ChartAxis crossAxis={false} dependentAxis tickCount={6} tickFormat={yTickFormat} />
  {isStack ? (
  <ChartStack>
  