in packages/charts/src/chart_types/xy_chart/utils/grid_lines.ts [64:122]
function getGridLinesForAxis(
axisSpec: AxisSpec,
visibleTicks: AxisTick[],
themeAxisStyle: AxisStyle,
panelSize: Size,
): GridLineGroup[] {
// vertical ==> horizontal grid lines
const isVertical = isVerticalAxis(axisSpec.position);
// merge the axis configured style with the theme style
const axisStyle = mergePartial(themeAxisStyle, axisSpec.style as RecursivePartial<AxisStyle>);
const gridLineThemeStyle = isVertical ? axisStyle.gridLine.vertical : axisStyle.gridLine.horizontal;
// axis can have a configured grid line style
const gridLineStyles = axisSpec.gridLine ? mergePartial(gridLineThemeStyle, axisSpec.gridLine) : gridLineThemeStyle;
if (!gridLineStyles.visible) {
return [];
}
// define the stroke for the specific set of grid lines
if (!gridLineStyles.stroke || !gridLineStyles.strokeWidth || gridLineStyles.strokeWidth < MIN_STROKE_WIDTH) {
return [];
}
const visibleTicksPerLayer = visibleTicks.reduce<Map<number, AxisTick[]>>((acc, tick) => {
if (Math.abs(tick.position - tick.domainClampedPosition) > OUTSIDE_RANGE_TOLERANCE) return acc; // no gridline for ticks outside the domain
if (typeof tick.layer === 'number' && !tick.showGrid) return acc; // no gridline for ticks outside the domain
if (HIDE_MINOR_TIME_GRID && typeof tick.layer === 'number' && tick.detailedLayer === 0) return acc; // no gridline for ticks outside the domain
const ticks = acc.get(tick.detailedLayer);
if (ticks) {
ticks.push(tick);
} else {
acc.set(tick.detailedLayer, [tick]);
}
return acc;
}, new Map());
const strokeColor = overrideOpacity(colorToRgba(gridLineStyles.stroke), (strokeColorOpacity) =>
gridLineStyles.opacity !== undefined ? strokeColorOpacity * gridLineStyles.opacity : strokeColorOpacity,
);
const stroke: Stroke = {
color: strokeColor,
width: gridLineStyles.strokeWidth,
dash: gridLineStyles.dash,
};
return [...visibleTicksPerLayer]
.sort(([k1], [k2]) => (k1 ?? 0) - (k2 ?? 0)) // increasing layer order
.map(([, visibleTicksOfLayer]) => {
const lines = visibleTicksOfLayer.map<Line>((tick: AxisTick) =>
isVertical
? getGridLineForVerticalAxisAt(tick.position, panelSize)
: getGridLineForHorizontalAxisAt(tick.position, panelSize),
);
return { lines, stroke, axisId: axisSpec.id };
});
}