feat: added new histogram panel

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -0,0 +1,117 @@
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
+import BarChartTooltip from 'lib/uPlotV2/components/Tooltip/BarChartTooltip';
+import {
+	BarTooltipProps,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+import { has } from 'lodash-es';
+import uPlot from 'uplot';
+
+import { BarChartProps } from '../types';
+import { stack } from './stackUtils';
+
+/** Returns true if the series at the given index is hidden (e.g. via legend toggle) */
+function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
+	return !plot.series[seriesIndex]?.show;
+}
+
+export default function BarChart(props: BarChartProps): JSX.Element {
+	const { children, isStackedBarChart, config, data, ...rest } = props;
+
+	// Store unstacked source data so uPlot hooks can access it (hooks run outside React's render cycle)
+	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
+	unstackedDataRef.current = isStackedBarChart ? data : null;
+
+	// Prevents re-entrant calls when we update chart data (avoids infinite loop in setData hook)
+	const isUpdatingChartRef = useRef(false);
+
+	const chartData = useMemo((): uPlot.AlignedData => {
+		if (!isStackedBarChart || !data || data.length < 2) {
+			return data as uPlot.AlignedData;
+		}
+		const noSeriesHidden = (): boolean => false; // include all series in initial stack
+		const { data: stacked } = stack(data as uPlot.AlignedData, noSeriesHidden);
+		return stacked;
+	}, [data, isStackedBarChart]);
+
+	const applyStackingToChart = useCallback((plot: uPlot): void => {
+		const unstacked = unstackedDataRef.current;
+		const hasValidData =
+			unstacked && plot.data && unstacked[0]?.length === plot.data[0]?.length;
+
+		if (!hasValidData || isUpdatingChartRef.current) {
+			return;
+		}
+
+		const shouldExcludeSeries = (idx: number): boolean =>
+			isSeriesHidden(plot, idx);
+		const { data: stacked, bands } = stack(unstacked, shouldExcludeSeries);
+
+		plot.delBand(null);
+		bands.forEach((band: uPlot.Band) => plot.addBand(band));
+
+		isUpdatingChartRef.current = true;
+		plot.setData(stacked);
+		isUpdatingChartRef.current = false;
+	}, []);
+
+	useLayoutEffect(() => {
+		if (!isStackedBarChart || !config) {
+			return undefined;
+		}
+
+		const onDataChange = (plot: uPlot): void => {
+			if (!isUpdatingChartRef.current) {
+				applyStackingToChart(plot);
+			}
+		};
+
+		const onSeriesVisibilityChange = (
+			plot: uPlot,
+			_seriesIdx: number | null,
+			opts: uPlot.Series,
+		): void => {
+			if (has(opts, 'focus')) {
+				return;
+			}
+			applyStackingToChart(plot);
+		};
+
+		const removeSetDataHook = config.addHook('setData', onDataChange);
+		const removeSetSeriesHook = config.addHook(
+			'setSeries',
+			onSeriesVisibilityChange,
+		);
+
+		return (): void => {
+			removeSetDataHook?.();
+			removeSetSeriesHook?.();
+		};
+	}, [isStackedBarChart, config, applyStackingToChart]);
+
+	const renderTooltip = useCallback(
+		(props: TooltipRenderArgs): React.ReactNode => {
+			const tooltipProps: BarTooltipProps = {
+				...props,
+				timezone: rest.timezone,
+				yAxisUnit: rest.yAxisUnit,
+				decimalPrecision: rest.decimalPrecision,
+				isStackedBarChart: isStackedBarChart,
+			};
+			return <BarChartTooltip {...tooltipProps} />;
+		},
+		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
+	);
+
+	return (
+		<ChartWrapper
+			{...rest}
+			config={config}
+			data={chartData}
+			renderTooltip={renderTooltip}
+		>
+			{children}
+		</ChartWrapper>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/BarChart/stackUtils.ts

@@ -0,0 +1,57 @@
+import uPlot, { AlignedData } from 'uplot';
+
+/**
+ * Stack data cumulatively (top-down: first series = top, last = bottom).
+ * When omit(i) returns true for a series index, that series is excluded from stacking.
+ */
+export function stack(
+	data: AlignedData,
+	omit: (seriesIndex: number) => boolean,
+): { data: AlignedData; bands: uPlot.Band[] } {
+	const d0Len = data[0].length;
+	const n = data.length - 1;
+	const data2: (number | null)[][] = Array(n);
+	const accum = Array(d0Len).fill(0) as number[];
+
+	// Accumulate from last series upward: last = raw, first = total
+	for (let i = n; i >= 1; i--) {
+		const seriesData = data[i] as (number | null)[];
+		if (omit(i)) {
+			data2[i - 1] = seriesData;
+		} else {
+			data2[i - 1] = seriesData.map((v, idx) => {
+				const val = v == null ? 0 : Number(v);
+				return (accum[idx] += val);
+			});
+		}
+	}
+
+	const bands: uPlot.Band[] = [];
+	// Bands: [upper, lower] - fill between consecutive visible series
+	for (let i = 1; i < data.length; i++) {
+		if (!omit(i)) {
+			const nextIdx = data.findIndex((_, j) => j > i && !omit(j));
+			if (nextIdx >= 1) {
+				bands.push({ series: [i, nextIdx] });
+			}
+		}
+	}
+
+	return {
+		data: [data[0], ...data2] as AlignedData,
+		bands,
+	};
+}
+
+/**
+ * Returns band indices for initial stacked state (no series omitted).
+ * Top-down: first series at top, band fills between consecutive series.
+ * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
+ */
+export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
+	const bands: uPlot.Band[] = [];
+	for (let i = 1; i < seriesCount; i++) {
+		bands.push({ series: [i, i + 1] });
+	}
+	return bands;
+}

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -23,6 +23,7 @@ export default function ChartWrapper({
 	width: containerWidth,
 	height: containerHeight,
 	showTooltip = true,
+	showLegend = true,
 	canPinTooltip = false,
 	syncMode,
 	syncKey,
@@ -36,6 +37,9 @@ export default function ChartWrapper({
 
 	const legendComponent = useCallback(
 		(averageLegendWidth: number): React.ReactNode => {
+			if (!showLegend) {
+				return null;
+			}
 			return (
 				<Legend
 					config={config}
@@ -44,7 +48,7 @@ export default function ChartWrapper({
 				/>
 			);
 		},
-		[config, legendConfig.position],
+		[config, legendConfig.position, showLegend],
 	);
 
 	const renderTooltipCallback = useCallback(
@@ -60,6 +64,7 @@ export default function ChartWrapper({
 	return (
 		<PlotContextProvider>
 			<ChartLayout
+				showLegend={showLegend}
 				config={config}
 				containerWidth={containerWidth}
 				containerHeight={containerHeight}

frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
+import HistogramTooltip from 'lib/uPlotV2/components/Tooltip/HistogramTooltip';
+import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
+import {
+	HistogramTooltipProps,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+
+import { HistogramChartProps } from '../types';
+
+export default function Histogram(props: HistogramChartProps): JSX.Element {
+	const {
+		children,
+		renderTooltip: customRenderTooltip,
+		isQueriesMerged,
+		...rest
+	} = props;
+
+	const renderTooltip = useCallback(
+		(props: TooltipRenderArgs): React.ReactNode => {
+			if (customRenderTooltip) {
+				return customRenderTooltip(props);
+			}
+			const content = buildTooltipContent({
+				data: props.uPlotInstance.data,
+				series: props.uPlotInstance.series,
+				dataIndexes: props.dataIndexes,
+				activeSeriesIndex: props.seriesIndex,
+				uPlotInstance: props.uPlotInstance,
+				yAxisUnit: rest.yAxisUnit ?? '',
+				decimalPrecision: rest.decimalPrecision,
+			});
+			const tooltipProps: HistogramTooltipProps = {
+				...props,
+				timezone: rest.timezone,
+				yAxisUnit: rest.yAxisUnit,
+				decimalPrecision: rest.decimalPrecision,
+				content,
+			};
+			return <HistogramTooltip {...tooltipProps} />;
+		},
+		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+	);
+
+	return (
+		<ChartWrapper
+			showLegend={!isQueriesMerged}
+			{...rest}
+			renderTooltip={renderTooltip}
+		>
+			{children}
+		</ChartWrapper>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -7,6 +7,7 @@ interface BaseChartProps {
 	width: number;
 	height: number;
 	showTooltip?: boolean;
+	showLegend?: boolean;
 	timezone: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
@@ -17,6 +18,7 @@ interface BaseChartProps {
 interface UPlotBasedChartProps {
 	config: UPlotConfigBuilder;
 	data: uPlot.AlignedData;
+	legendConfig: LegendConfig;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
@@ -26,14 +28,20 @@ interface UPlotBasedChartProps {
 }
 
 export interface TimeSeriesChartProps
+	extends BaseChartProps,
+		UPlotBasedChartProps {}
+
+export interface HistogramChartProps
 	extends BaseChartProps,
 		UPlotBasedChartProps {
-	legendConfig: LegendConfig;
+	isQueriesMerged?: boolean;
 }
 
 export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
-	legendConfig: LegendConfig;
 	isStackedBarChart?: boolean;
 }
 
-export type ChartProps = TimeSeriesChartProps | BarChartProps;
+export type ChartProps =
+	| TimeSeriesChartProps
+	| BarChartProps
+	| HistogramChartProps;

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import { calculateChartDimensions } from 'container/DashboardContainer/visualization/charts/utils';
+import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 
 import './ChartLayout.styles.scss';
 
 export interface ChartLayoutProps {
+	showLegend?: boolean;
 	legendComponent: (legendPerSet: number) => React.ReactNode;
 	children: (props: {
 		chartWidth: number;
@@ -20,6 +22,7 @@ export interface ChartLayoutProps {
 	config: UPlotConfigBuilder;
 }
 export default function ChartLayout({
+	showLegend = true,
 	legendComponent,
 	children,
 	layoutChildren,
@@ -30,6 +33,15 @@ export default function ChartLayout({
 }: ChartLayoutProps): JSX.Element {
 	const chartDimensions = useMemo(
 		() => {
+			if (!showLegend) {
+				return {
+					width: containerWidth,
+					height: containerHeight,
+					legendWidth: 0,
+					legendHeight: 0,
+					averageLegendWidth: MAX_LEGEND_WIDTH,
+				};
+			}
 			const legendItemsMap = config.getLegendItems();
 			const seriesLabels = Object.values(legendItemsMap)
 				.map((item) => item.label)
@@ -42,7 +54,7 @@ export default function ChartLayout({
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[containerWidth, containerHeight, legendConfig],
+		[containerWidth, containerHeight, legendConfig, showLegend],
 	);
 
 	return (
@@ -60,15 +72,17 @@ export default function ChartLayout({
 						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
-				<div
-					className="chart-layout__legend-wrapper"
-					style={{
-						height: chartDimensions.legendHeight,
-						width: chartDimensions.legendWidth,
-					}}
-				>
-					{legendComponent(chartDimensions.averageLegendWidth)}
-				</div>
+				{showLegend && (
+					<div
+						className="chart-layout__legend-wrapper"
+						style={{
+							height: chartDimensions.legendHeight,
+							width: chartDimensions.legendWidth,
+						}}
+					>
+						{legendComponent(chartDimensions.averageLegendWidth)}
+					</div>
+				)}
 			</div>
 			{layoutChildren}
 		</div>

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import ContextMenu from 'periscope/components/ContextMenu';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
+import { getTimeRange } from 'utils/getTimeRange';
+
+import BarChart from '../../charts/BarChart/BarChart';
+import ChartManager from '../../components/ChartManager/ChartManager';
+import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
+import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
+
+function BarPanel(props: PanelWrapperProps): JSX.Element {
+	const {
+		panelMode,
+		queryResponse,
+		widget,
+		onDragSelect,
+		isFullViewMode,
+		onToggleModelHandler,
+	} = props;
+	const uPlotRef = useRef<uPlot | null>(null);
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+	const graphRef = useRef<HTMLDivElement>(null);
+	const [minTimeScale, setMinTimeScale] = useState<number>();
+	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+	const containerDimensions = useResizeObserver(graphRef);
+
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+
+	useEffect(() => {
+		if (toScrollWidgetId === widget.id) {
+			graphRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			graphRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+
+	useEffect((): void => {
+		const { startTime, endTime } = getTimeRange(queryResponse);
+
+		setMinTimeScale(startTime);
+		setMaxTimeScale(endTime);
+	}, [queryResponse]);
+
+	const {
+		coordinates,
+		popoverPosition,
+		onClose,
+		menuItemsConfig,
+		clickHandlerWithContextMenu,
+	} = usePanelContextMenu({
+		widget,
+		queryResponse,
+	});
+
+	const config = useMemo(() => {
+		return prepareBarPanelConfig({
+			widget,
+			isDarkMode,
+			currentQuery: widget.query,
+			onClick: clickHandlerWithContextMenu,
+			onDragSelect,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			timezone,
+			panelMode,
+			minTimeScale: minTimeScale,
+			maxTimeScale: maxTimeScale,
+		});
+	}, [
+		widget,
+		isDarkMode,
+		queryResponse?.data?.payload,
+		clickHandlerWithContextMenu,
+		onDragSelect,
+		minTimeScale,
+		maxTimeScale,
+		timezone,
+		panelMode,
+	]);
+
+	const chartData = useMemo(() => {
+		if (!queryResponse?.data?.payload) {
+			return [];
+		}
+		return prepareBarPanelData(queryResponse?.data?.payload);
+	}, [queryResponse?.data?.payload]);
+
+	const layoutChildren = useMemo(() => {
+		if (!isFullViewMode) {
+			return null;
+		}
+		return (
+			<ChartManager
+				config={config}
+				alignedData={chartData}
+				yAxisUnit={widget.yAxisUnit}
+				onCancel={onToggleModelHandler}
+			/>
+		);
+	}, [
+		isFullViewMode,
+		config,
+		chartData,
+		widget.yAxisUnit,
+		onToggleModelHandler,
+	]);
+
+	return (
+		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
+			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
+				<BarChart
+					config={config}
+					legendConfig={{
+						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
+					}}
+					plotRef={(plot: uPlot | null): void => {
+						uPlotRef.current = plot;
+					}}
+					onDestroy={(): void => {
+						uPlotRef.current = null;
+					}}
+					yAxisUnit={widget.yAxisUnit}
+					decimalPrecision={widget.decimalPrecision}
+					timezone={timezone.value}
+					data={chartData as uPlot.AlignedData}
+					width={containerDimensions.width}
+					height={containerDimensions.height}
+					layoutChildren={layoutChildren}
+					isStackedBarChart={widget.stackedBarChart ?? false}
+				>
+					<ContextMenu
+						coordinates={coordinates}
+						popoverPosition={popoverPosition}
+						title={menuItemsConfig.header as string}
+						items={menuItemsConfig.items}
+						onClose={onClose}
+					/>
+				</BarChart>
+			)}
+		</div>
+	);
+}
+
+export default BarPanel;

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -0,0 +1,108 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/BarChart/stackUtils';
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import {
+	DrawStyle,
+	LineInterpolation,
+	LineStyle,
+	VisibilityMode,
+} from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryData } from 'types/api/widgets/getQuery';
+import { AlignedData } from 'uplot';
+
+import { PanelMode } from '../types';
+import { fillMissingXAxisTimestamps, getXAxisTimestamps } from '../utils';
+import { buildBaseConfig } from '../utils/baseConfigBuilder';
+
+export function prepareBarPanelData(
+	apiResponse: MetricRangePayloadProps,
+): AlignedData {
+	const seriesList = apiResponse?.data?.result || [];
+	const timestampArr = getXAxisTimestamps(seriesList);
+	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
+	return [timestampArr, ...yAxisValuesArr];
+}
+
+export function prepareBarPanelConfig({
+	widget,
+	isDarkMode,
+	currentQuery,
+	onClick,
+	onDragSelect,
+	apiResponse,
+	timezone,
+	panelMode,
+	minTimeScale,
+	maxTimeScale,
+}: {
+	widget: Widgets;
+	isDarkMode: boolean;
+	currentQuery: Query;
+	onClick: OnClickPluginOpts['onClick'];
+	onDragSelect: (startTime: number, endTime: number) => void;
+	apiResponse: MetricRangePayloadProps;
+	timezone: Timezone;
+	panelMode: PanelMode;
+	minTimeScale?: number;
+	maxTimeScale?: number;
+}): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		widget,
+		isDarkMode,
+		onClick,
+		onDragSelect,
+		apiResponse,
+		timezone,
+		panelMode,
+		panelType: PANEL_TYPES.BAR,
+		minTimeScale,
+		maxTimeScale,
+	});
+
+	builder.setCursor({
+		focus: {
+			prox: 1e3,
+		},
+	});
+
+	if (widget.stackedBarChart) {
+		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
+		builder.setBands(getInitialStackedBands(seriesCount));
+	}
+
+	const seriesList: QueryData[] = apiResponse?.data?.result || [];
+	seriesList.forEach((series) => {
+		const baseLabelName = getLabelName(
+			series.metric,
+			series.queryName || '', // query
+			series.legend || '',
+		);
+
+		const label = currentQuery
+			? getLegend(series, currentQuery, baseLabelName)
+			: baseLabelName;
+
+		builder.addSeries({
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			panelType: PANEL_TYPES.BAR,
+			label: label,
+			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: false,
+			lineStyle: LineStyle.Solid,
+			lineInterpolation: LineInterpolation.Spline,
+			showPoints: VisibilityMode.Never,
+			pointSize: 5,
+			isDarkMode,
+		});
+	});
+
+	return builder;
+}

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
+
+import Histogram from '../../charts/Histogram/Histogram';
+import ChartManager from '../../components/ChartManager/ChartManager';
+import {
+	prepareHistogramPanelConfig,
+	prepareHistogramPanelData,
+} from './utils';
+
+function HistogramPanel(props: PanelWrapperProps): JSX.Element {
+	const {
+		panelMode,
+		queryResponse,
+		widget,
+		isFullViewMode,
+		onToggleModelHandler,
+	} = props;
+	const uPlotRef = useRef<uPlot | null>(null);
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+	const graphRef = useRef<HTMLDivElement>(null);
+	const containerDimensions = useResizeObserver(graphRef);
+
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+
+	useEffect(() => {
+		if (toScrollWidgetId === widget.id) {
+			graphRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			graphRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+
+	const config = useMemo(() => {
+		return prepareHistogramPanelConfig({
+			widget,
+			isDarkMode,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			panelMode,
+		});
+	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
+
+	const chartData = useMemo(() => {
+		if (!queryResponse?.data?.payload) {
+			return [];
+		}
+		return prepareHistogramPanelData({
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			bucketWidth: widget?.bucketWidth,
+			bucketCount: widget?.bucketCount,
+			mergeAllActiveQueries: widget?.mergeAllActiveQueries,
+		});
+	}, [
+		queryResponse?.data?.payload,
+		widget?.bucketWidth,
+		widget?.bucketCount,
+		widget?.mergeAllActiveQueries,
+	]);
+
+	const layoutChildren = useMemo(() => {
+		if (!isFullViewMode) {
+			return null;
+		}
+		return (
+			<ChartManager
+				config={config}
+				alignedData={chartData}
+				yAxisUnit={widget.yAxisUnit}
+				onCancel={onToggleModelHandler}
+			/>
+		);
+	}, [
+		isFullViewMode,
+		config,
+		chartData,
+		widget.yAxisUnit,
+		onToggleModelHandler,
+	]);
+
+	return (
+		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
+			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
+				<Histogram
+					config={config}
+					legendConfig={{
+						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
+					}}
+					plotRef={(plot: uPlot | null): void => {
+						uPlotRef.current = plot;
+					}}
+					onDestroy={(): void => {
+						uPlotRef.current = null;
+					}}
+					isQueriesMerged={widget.mergeAllActiveQueries}
+					yAxisUnit={widget.yAxisUnit}
+					decimalPrecision={widget.decimalPrecision}
+					syncMode={DashboardCursorSync.Crosshair}
+					timezone={timezone.value}
+					data={chartData as uPlot.AlignedData}
+					width={containerDimensions.width}
+					height={containerDimensions.height}
+					layoutChildren={layoutChildren}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default HistogramPanel;

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts

@@ -0,0 +1,214 @@
+import { histogramBucketSizes } from '@grafana/data';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { DEFAULT_BUCKET_COUNT } from 'container/PanelWrapper/constants';
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import { DrawStyle, VisibilityMode } from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { incrRoundDn } from 'lib/uPlotV2/utils/scale';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { AlignedData } from 'uplot';
+
+import { PanelMode } from '../types';
+import { buildBaseConfig } from '../utils/baseConfigBuilder';
+import {
+	addNullToFirstHistogram,
+	histogram,
+	join,
+	replaceUndefinedWithNull,
+	roundDecimals,
+} from '../utils/histogram';
+
+export interface PrepareHistogramPanelDataParams {
+	apiResponse: MetricRangePayloadProps;
+	bucketWidth?: number;
+	bucketCount?: number;
+	mergeAllActiveQueries?: boolean;
+}
+
+const BUCKET_OFFSET = 0;
+const HIST_SORT = (a: number, b: number): number => a - b;
+
+function extractNumericValues(
+	result: MetricRangePayloadProps['data']['result'],
+): number[] {
+	const values: number[] = [];
+	for (const item of result) {
+		for (const [, valueStr] of item.values) {
+			values.push(Number.parseFloat(valueStr) || 0);
+		}
+	}
+	return values;
+}
+
+function computeSmallestDelta(sortedValues: number[]): number {
+	if (sortedValues.length <= 1) {
+		return 0;
+	}
+	let smallest = Infinity;
+	for (let i = 1; i < sortedValues.length; i++) {
+		const delta = sortedValues[i] - sortedValues[i - 1];
+		if (delta > 0) {
+			smallest = Math.min(smallest, delta);
+		}
+	}
+	return smallest === Infinity ? 0 : smallest;
+}
+
+function selectBucketSize({
+	range,
+	bucketCount,
+	smallestDelta,
+	bucketWidthOverride,
+}: {
+	range: number;
+	bucketCount: number;
+	smallestDelta: number;
+	bucketWidthOverride?: number;
+}): number {
+	if (bucketWidthOverride != null && bucketWidthOverride > 0) {
+		return bucketWidthOverride;
+	}
+	const targetSize = range / bucketCount;
+	for (const candidate of histogramBucketSizes) {
+		if (targetSize < candidate && candidate >= smallestDelta) {
+			return candidate;
+		}
+	}
+	return 0;
+}
+
+function buildFrames(
+	result: MetricRangePayloadProps['data']['result'],
+	mergeAllActiveQueries: boolean,
+): number[][] {
+	const frames: number[][] = result.map((item) =>
+		item.values.map(([, valueStr]) => Number.parseFloat(valueStr) || 0),
+	);
+	if (mergeAllActiveQueries && frames.length > 1) {
+		const first = frames[0];
+		for (let i = 1; i < frames.length; i++) {
+			first.push(...frames[i]);
+			frames[i] = [];
+		}
+	}
+	return frames;
+}
+
+export function prepareHistogramPanelData({
+	apiResponse,
+	bucketWidth,
+	bucketCount: bucketCountProp = DEFAULT_BUCKET_COUNT,
+	mergeAllActiveQueries = false,
+}: PrepareHistogramPanelDataParams): AlignedData {
+	const bucketCount = bucketCountProp ?? DEFAULT_BUCKET_COUNT;
+	const result = apiResponse.data.result;
+
+	const seriesValues = extractNumericValues(result);
+	if (seriesValues.length === 0) {
+		return [[]];
+	}
+
+	const sorted = [...seriesValues].sort((a, b) => a - b);
+	const min = sorted[0];
+	const max = sorted[sorted.length - 1];
+	const range = max - min;
+	const smallestDelta = computeSmallestDelta(sorted);
+	let bucketSize = selectBucketSize({
+		range,
+		bucketCount,
+		smallestDelta,
+		bucketWidthOverride: bucketWidth,
+	});
+	if (bucketSize <= 0) {
+		bucketSize = range > 0 ? range / bucketCount : 1;
+	}
+
+	const getBucket = (v: number): number =>
+		roundDecimals(incrRoundDn(v - BUCKET_OFFSET, bucketSize) + BUCKET_OFFSET, 9);
+
+	const frames = buildFrames(result, mergeAllActiveQueries);
+	const histograms: AlignedData[] = frames
+		.filter((frame) => frame.length > 0)
+		.map((frame) => histogram(frame, getBucket, HIST_SORT));
+
+	if (histograms.length === 0) {
+		return [[]];
+	}
+
+	const joined = join(histograms);
+	replaceUndefinedWithNull(joined);
+	addNullToFirstHistogram(joined, bucketSize);
+	return joined;
+}
+
+export function prepareHistogramPanelConfig({
+	widget,
+	apiResponse,
+	panelMode,
+	isDarkMode,
+}: {
+	widget: Widgets;
+	apiResponse: MetricRangePayloadProps;
+	panelMode: PanelMode;
+	isDarkMode: boolean;
+}): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		widget,
+		isDarkMode,
+		apiResponse,
+		panelMode,
+		panelType: PANEL_TYPES.HISTOGRAM,
+	});
+	builder.setCursor({
+		drag: {
+			x: false,
+			y: false,
+			setScale: true,
+		},
+		focus: {
+			prox: 1e3,
+		},
+	});
+
+	builder.addScale({
+		scaleKey: 'x',
+		time: false,
+		auto: true,
+	});
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+		auto: true,
+	});
+
+	const currentQuery = widget.query;
+
+	apiResponse.data.result.forEach((series) => {
+		const baseLabelName = getLabelName(
+			series.metric,
+			series.queryName || '', // query
+			series.legend || '',
+		);
+
+		const label = currentQuery
+			? getLegend(series, currentQuery, baseLabelName)
+			: baseLabelName;
+
+		builder.addSeries({
+			label: label,
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			panelType: PANEL_TYPES.HISTOGRAM,
+			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: false,
+			barWidthFactor: 1,
+			showPoints: VisibilityMode.Never,
+			pointSize: 5,
+			isDarkMode,
+		});
+	});
+
+	return builder;
+}

frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts

@@ -19,9 +19,9 @@ export interface BaseConfigBuilderProps {
 	widget: Widgets;
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	timezone: Timezone;
+	onClick?: OnClickPluginOpts['onClick'];
+	onDragSelect?: (startTime: number, endTime: number) => void;
+	timezone?: Timezone;
 	panelMode: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
@@ -40,8 +40,10 @@ export function buildBaseConfig({
 	minTimeScale,
 	maxTimeScale,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+	const tzDate = timezone
+		? (timestamp: number): Date =>
+				uPlot.tzDate(new Date(timestamp * 1e3), timezone.value)
+		: undefined;
 
 	const builder = new UPlotConfigBuilder({
 		onDragSelect,

frontend/src/container/DashboardContainer/visualization/panels/utils/histogram.ts

@@ -0,0 +1,181 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable no-param-reassign */
+import {
+	NULL_EXPAND,
+	NULL_REMOVE,
+	NULL_RETAIN,
+} from 'container/PanelWrapper/constants';
+import { AlignedData } from 'uplot';
+
+export function incrRoundDn(num: number, incr: number): number {
+	return Math.floor(num / incr) * incr;
+}
+
+export function roundDecimals(val: number, dec = 0): number {
+	if (Number.isInteger(val)) {
+		return val;
+	}
+
+	const p = 10 ** dec;
+	const n = val * p * (1 + Number.EPSILON);
+	return Math.round(n) / p;
+}
+
+function nullExpand(
+	yVals: Array<number | null>,
+	nullIdxs: number[],
+	alignedLen: number,
+): void {
+	for (let i = 0, xi, lastNullIdx = -1; i < nullIdxs.length; i++) {
+		const nullIdx = nullIdxs[i];
+
+		if (nullIdx > lastNullIdx) {
+			xi = nullIdx - 1;
+			while (xi >= 0 && yVals[xi] == null) {
+				yVals[xi--] = null;
+			}
+
+			xi = nullIdx + 1;
+			while (xi < alignedLen && yVals[xi] == null) {
+				yVals[(lastNullIdx = xi++)] = null;
+			}
+		}
+	}
+}
+
+export function join(
+	tables: AlignedData[],
+	nullModes?: number[][],
+): AlignedData {
+	let xVals: Set<number>;
+
+	// eslint-disable-next-line prefer-const
+	xVals = new Set();
+
+	for (let ti = 0; ti < tables.length; ti++) {
+		const t = tables[ti];
+		const xs = t[0];
+		const len = xs.length;
+
+		for (let i = 0; i < len; i++) {
+			xVals.add(xs[i]);
+		}
+	}
+
+	const data = [Array.from(xVals).sort((a, b) => a - b)];
+
+	const alignedLen = data[0].length;
+
+	const xIdxs = new Map();
+
+	for (let i = 0; i < alignedLen; i++) {
+		xIdxs.set(data[0][i], i);
+	}
+
+	for (let ti = 0; ti < tables.length; ti++) {
+		const t = tables[ti];
+		const xs = t[0];
+
+		for (let si = 1; si < t.length; si++) {
+			const ys = t[si];
+
+			const yVals = Array(alignedLen).fill(undefined);
+
+			const nullMode = nullModes ? nullModes[ti][si] : NULL_RETAIN;
+
+			const nullIdxs = [];
+
+			for (let i = 0; i < ys.length; i++) {
+				const yVal = ys[i];
+				const alignedIdx = xIdxs.get(xs[i]);
+
+				if (yVal === null) {
+					if (nullMode !== NULL_REMOVE) {
+						yVals[alignedIdx] = yVal;
+
+						if (nullMode === NULL_EXPAND) {
+							nullIdxs.push(alignedIdx);
+						}
+					}
+				} else {
+					yVals[alignedIdx] = yVal;
+				}
+			}
+
+			nullExpand(yVals, nullIdxs, alignedLen);
+
+			data.push(yVals);
+		}
+	}
+
+	return data as AlignedData;
+}
+
+export function histogram(
+	vals: number[],
+	getBucket: (v: number) => number,
+	sort?: ((a: number, b: number) => number) | null,
+): AlignedData {
+	const hist = new Map();
+
+	for (let i = 0; i < vals.length; i++) {
+		let v = vals[i];
+
+		if (v != null) {
+			v = getBucket(v);
+		}
+
+		const entry = hist.get(v);
+
+		if (entry) {
+			entry.count++;
+		} else {
+			hist.set(v, { value: v, count: 1 });
+		}
+	}
+
+	const bins = [...hist.values()];
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	sort && bins.sort((a, b) => sort(a.value, b.value));
+
+	const values = Array(bins.length);
+	const counts = Array(bins.length);
+
+	for (let i = 0; i < bins.length; i++) {
+		values[i] = bins[i].value;
+		counts[i] = bins[i].count;
+	}
+
+	return [values, counts];
+}
+
+export function replaceUndefinedWithNull(data: AlignedData): AlignedData {
+	const arrays = data as (number | null | undefined)[][];
+	for (let i = 0; i < arrays.length; i++) {
+		for (let j = 0; j < arrays[i].length; j++) {
+			if (arrays[i][j] === undefined) {
+				arrays[i][j] = null;
+			}
+		}
+	}
+	return data;
+}
+
+export function addNullToFirstHistogram(
+	data: AlignedData,
+	bucketSize: number,
+): void {
+	const histograms = data as (number | null)[][];
+	if (
+		histograms.length > 0 &&
+		histograms[0].length > 0 &&
+		histograms[0][0] !== null
+	) {
+		histograms[0].unshift(histograms[0][0] - bucketSize);
+		for (let i = 1; i < histograms.length; i++) {
+			histograms[i].unshift(null);
+		}
+	}
+}

frontend/src/lib/uPlotV2/components/Tooltip/BarChartTooltip.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+
+import { BarTooltipProps, TooltipContentItem } from '../types';
+import Tooltip from './Tooltip';
+import { buildTooltipContent } from './utils';
+
+export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
+	const content = useMemo(
+		(): TooltipContentItem[] =>
+			buildTooltipContent({
+				data: props.uPlotInstance.data,
+				series: props.uPlotInstance.series,
+				dataIndexes: props.dataIndexes,
+				activeSeriesIndex: props.seriesIndex,
+				uPlotInstance: props.uPlotInstance,
+				yAxisUnit: props.yAxisUnit ?? '',
+				decimalPrecision: props.decimalPrecision,
+				isStackedBarChart: props.isStackedBarChart,
+			}),
+		[
+			props.uPlotInstance,
+			props.seriesIndex,
+			props.dataIndexes,
+			props.yAxisUnit,
+			props.decimalPrecision,
+			props.isStackedBarChart,
+		],
+	);
+
+	return <Tooltip {...props} content={content} />;
+}

frontend/src/lib/uPlotV2/components/Tooltip/HistogramTooltip.tsx

@@ -0,0 +1,8 @@
+import { HistogramTooltipProps } from '../types';
+import Tooltip from './Tooltip';
+
+export default function HistogramTooltip(
+	props: HistogramTooltipProps,
+): JSX.Element {
+	return <Tooltip {...props} showTooltipHeader={false} />;
+}

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx

@@ -16,12 +16,16 @@ export default function Tooltip({
 	uPlotInstance,
 	timezone,
 	content,
+	showTooltipHeader = true,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
 	const tooltipContent = content ?? [];
 
 	const headerTitle = useMemo(() => {
+		if (!showTooltipHeader) {
+			return null;
+		}
 		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
 		if (cursorIdx == null) {
@@ -30,7 +34,12 @@ export default function Tooltip({
 		return dayjs(data[0][cursorIdx] * 1000)
 			.tz(timezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
-	}, [timezone, uPlotInstance.data, uPlotInstance.cursor.idx]);
+	}, [
+		timezone,
+		uPlotInstance.data,
+		uPlotInstance.cursor.idx,
+		showTooltipHeader,
+	]);
 
 	return (
 		<div
@@ -39,9 +48,11 @@ export default function Tooltip({
 				isDarkMode ? 'darkMode' : 'lightMode',
 			)}
 		>
-			<div className="uplot-tooltip-header">
-				<span>{headerTitle}</span>
-			</div>
+			{showTooltipHeader && (
+				<div className="uplot-tooltip-header">
+					<span>{headerTitle}</span>
+				</div>
+			)}
 			<div
 				style={{
 					height: Math.min(

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -25,16 +25,28 @@ export function getTooltipBaseValue({
 	index,
 	dataIndex,
 	isStackedBarChart,
+	series,
 }: {
 	data: AlignedData;
 	index: number;
 	dataIndex: number;
 	isStackedBarChart?: boolean;
+	series?: Series[];
 }): number | null {
 	let baseValue = data[index][dataIndex] ?? null;
-	if (isStackedBarChart && index + 1 < data.length && baseValue !== null) {
-		const nextValue = data[index + 1][dataIndex] ?? null;
-		if (nextValue !== null) {
+	// Top-down stacking (first series at top): raw = stacked[i] - stacked[nextVisible].
+	// When series are hidden, we must use the next *visible* series, not index+1,
+	// since hidden series keep raw values and would produce negative/wrong results.
+	if (isStackedBarChart && baseValue !== null && series) {
+		let nextVisibleIdx = -1;
+		for (let j = index + 1; j < series.length; j++) {
+			if (series[j]?.show) {
+				nextVisibleIdx = j;
+				break;
+			}
+		}
+		if (nextVisibleIdx >= 1) {
+			const nextValue = data[nextVisibleIdx][dataIndex] ?? 0;
 			baseValue = baseValue - nextValue;
 		}
 	}
@@ -80,6 +92,7 @@ export function buildTooltipContent({
 			index,
 			dataIndex,
 			isStackedBarChart,
+			series,
 		});
 
 		const isActive = index === activeSeriesIndex;

frontend/src/lib/uPlotV2/components/types.ts

@@ -60,6 +60,7 @@ export interface TooltipRenderArgs {
 }
 
 export interface BaseTooltipProps {
+	showTooltipHeader?: boolean;
 	timezone: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
@@ -74,7 +75,14 @@ export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
 	isStackedBarChart?: boolean;
 }
 
-export type TooltipProps = TimeSeriesTooltipProps | BarTooltipProps;
+export interface HistogramTooltipProps
+	extends BaseTooltipProps,
+		TooltipRenderArgs {}
+
+export type TooltipProps =
+	| TimeSeriesTooltipProps
+	| BarTooltipProps
+	| HistogramTooltipProps;
 
 export enum LegendPosition {
 	BOTTOM = 'bottom',

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -1,8 +1,10 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import uPlot, { Series } from 'uplot';
 
 import {
+	BarAlignment,
 	ConfigBuilder,
 	DrawStyle,
 	LineInterpolation,
@@ -18,15 +20,10 @@ import {
 export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	private buildLineConfig({
 		lineColor,
-		lineWidth,
-		lineStyle,
-		lineCap,
 	}: {
 		lineColor: string;
-		lineWidth?: number;
-		lineStyle?: LineStyle;
-		lineCap?: Series.Cap;
 	}): Partial<Series> {
+		const { lineWidth, lineStyle, lineCap } = this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: lineColor,
 			width: lineWidth ?? 2,
@@ -39,21 +36,28 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		if (lineCap) {
 			lineConfig.cap = lineCap;
 		}
+
+		if (this.props.panelType === PANEL_TYPES.BAR) {
+			lineConfig.fill = lineColor;
+		} else if (this.props.panelType === PANEL_TYPES.HISTOGRAM) {
+			lineConfig.fill = `${lineColor}40`;
+		}
+
 		return lineConfig;
 	}
 
 	/**
 	 * Build path configuration
 	 */
-	private buildPathConfig({
-		pathBuilder,
-		drawStyle,
-		lineInterpolation,
-	}: {
-		pathBuilder?: Series.PathBuilder | null;
-		drawStyle: DrawStyle;
-		lineInterpolation?: LineInterpolation;
-	}): Partial<Series> {
+	private buildPathConfig(): Partial<Series> {
+		const {
+			pathBuilder,
+			drawStyle,
+			lineInterpolation,
+			barAlignment,
+			barMaxWidth,
+			barWidthFactor,
+		} = this.props;
 		if (pathBuilder) {
 			return { paths: pathBuilder };
 		}
@@ -70,7 +74,13 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 					idx0: number,
 					idx1: number,
 				): Series.Paths | null => {
-					const pathsBuilder = getPathBuilder(drawStyle, lineInterpolation);
+					const pathsBuilder = getPathBuilder({
+						drawStyle,
+						lineInterpolation,
+						barAlignment,
+						barMaxWidth,
+						barWidthFactor,
+					});
 
 					return pathsBuilder(self, seriesIdx, idx0, idx1);
 				},
@@ -85,21 +95,17 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	 */
 	private buildPointsConfig({
 		lineColor,
-		lineWidth,
-		pointSize,
-		pointsBuilder,
-		pointsFilter,
-		drawStyle,
-		showPoints,
 	}: {
 		lineColor: string;
-		lineWidth?: number;
-		pointSize?: number;
-		pointsBuilder: Series.Points.Show | null;
-		pointsFilter: Series.Points.Filter | null;
-		drawStyle: DrawStyle;
-		showPoints?: VisibilityMode;
 	}): Partial<Series.Points> {
+		const {
+			lineWidth,
+			pointSize,
+			pointsBuilder,
+			pointsFilter,
+			drawStyle,
+			showPoints,
+		} = this.props;
 		const pointsConfig: Partial<Series.Points> = {
 			stroke: lineColor,
 			fill: lineColor,
@@ -136,44 +142,16 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}
 
 	getConfig(): Series {
-		const {
-			drawStyle,
-			pathBuilder,
-			pointsBuilder,
-			pointsFilter,
-			lineInterpolation,
-			lineWidth,
-			lineStyle,
-			lineCap,
-			showPoints,
-			pointSize,
-			scaleKey,
-			label,
-			spanGaps,
-			show = true,
-		} = this.props;
+		const { scaleKey, label, spanGaps, show = true } = this.props;
 
 		const lineColor = this.getLineColor();
 
 		const lineConfig = this.buildLineConfig({
 			lineColor,
-			lineWidth,
-			lineStyle,
-			lineCap,
-		});
-		const pathConfig = this.buildPathConfig({
-			pathBuilder,
-			drawStyle,
-			lineInterpolation,
 		});
+		const pathConfig = this.buildPathConfig();
 		const pointsConfig = this.buildPointsConfig({
 			lineColor,
-			lineWidth,
-			pointSize,
-			pointsBuilder: pointsBuilder ?? null,
-			pointsFilter: pointsFilter ?? null,
-			drawStyle,
-			showPoints,
 		});
 
 		return {
@@ -203,10 +181,19 @@ let builders: PathBuilders | null = null;
 /**
  * Get path builder based on draw style and interpolation
  */
-function getPathBuilder(
-	style: DrawStyle,
-	lineInterpolation?: LineInterpolation,
-): Series.PathBuilder {
+function getPathBuilder({
+	drawStyle,
+	lineInterpolation,
+	barAlignment = BarAlignment.Center,
+	barWidthFactor = 0.6,
+	barMaxWidth = 200,
+}: {
+	drawStyle: DrawStyle;
+	lineInterpolation?: LineInterpolation;
+	barAlignment?: BarAlignment;
+	barMaxWidth?: number;
+	barWidthFactor?: number;
+}): Series.PathBuilder {
 	const pathBuilders = uPlot.paths;
 
 	if (!builders) {
@@ -226,7 +213,18 @@ function getPathBuilder(
 		};
 	}
 
-	if (style === DrawStyle.Line) {
+	if (drawStyle === DrawStyle.Bar) {
+		const barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${barMaxWidth}`;
+		if (!builders[barsCfgKey] && pathBuilders.bars) {
+			builders[barsCfgKey] = pathBuilders.bars({
+				size: [barWidthFactor, barMaxWidth],
+				align: barAlignment,
+			});
+		}
+		return builders[barsCfgKey];
+	}
+
+	if (drawStyle === DrawStyle.Line) {
 		if (lineInterpolation === LineInterpolation.StepBefore) {
 			return builders.stepBefore;
 		}

frontend/src/lib/uPlotV2/config/types.ts

@@ -126,7 +126,45 @@ export enum VisibilityMode {
 	Never = 'never',
 }
 
-export interface SeriesProps {
+/**
+ * Props for configuring lines
+ */
+export interface LineConfig {
+	lineColor?: string;
+	lineInterpolation?: LineInterpolation;
+	lineStyle?: LineStyle;
+	lineWidth?: number;
+	lineCap?: Series.Cap;
+}
+
+/**
+ * Alignment of bars
+ */
+export enum BarAlignment {
+	After = 1,
+	Before = -1,
+	Center = 0,
+}
+
+/**
+ * Props for configuring bars
+ */
+export interface BarConfig {
+	barAlignment?: BarAlignment;
+	barMaxWidth?: number;
+	barWidthFactor?: number;
+}
+
+/**
+ * Props for configuring points
+ */
+export interface PointsConfig {
+	pointColor?: string;
+	pointSize?: number;
+	showPoints?: VisibilityMode;
+}
+
+export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	scaleKey: string;
 	label?: string;
 	panelType: PANEL_TYPES;
@@ -137,20 +175,7 @@ export interface SeriesProps {
 	pointsBuilder?: Series.Points.Show;
 	show?: boolean;
 	spanGaps?: boolean;
-
 	isDarkMode?: boolean;
-
-	// Line config
-	lineColor?: string;
-	lineInterpolation?: LineInterpolation;
-	lineStyle?: LineStyle;
-	lineWidth?: number;
-	lineCap?: Series.Cap;
-
-	// Points config
-	pointColor?: string;
-	pointSize?: number;
-	showPoints?: VisibilityMode;
 }
 
 export interface LegendItem {