fix(insights): Fix bar chart height (#21707)

frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx

@@ -584,6 +584,8 @@ export function LineGraph_({
             },
         }
 
+        const truncateRows = !inSurveyView && !!insightProps.dashboardId
+
         if (type === GraphType.Bar) {
             if (hideXAxis || hideYAxis) {
                 options.layout = { padding: 20 }
@@ -674,29 +676,31 @@ export function LineGraph_({
                 y: {
                     display: true,
                     beforeFit: (scale) => {
-                        if (inSurveyView) {
-                            scale.ticks = scale.ticks.map((tick) => {
-                                if (typeof tick.label === 'string') {
-                                    return { ...tick, label: truncateString(tick.label, 50) }
-                                }
-                                return tick
-                            })
-
-                            const ROW_HEIGHT = 60
-                            const dynamicHeight = scale.ticks.length * ROW_HEIGHT
-                            const height = dynamicHeight
-                            const parentNode: any = scale.chart?.canvas?.parentNode
-                            parentNode.style.height = `${height}px`
-                        } else {
-                            // display only as many bars, as we can fit labels
+                        scale.ticks = scale.ticks.map((tick) => {
+                            if (typeof tick.label === 'string') {
+                                return { ...tick, label: truncateString(tick.label, 50) }
+                            }
+                            return tick
+                        })
+
+                        const ROW_HEIGHT = 20
+                        const height = scale.ticks.length * ROW_HEIGHT
+                        const parentNode: any = scale.chart?.canvas?.parentNode
+                        parentNode.style.height = `${height}px`
+
+                        if (truncateRows) {
+                            // Display only as many bars, as we can fit labels
+                            // Important: Make sure the query result does not deliver more data than we can display
+                            // See apply_dashboard_filters function in query runners
                             scale.max = scale.ticks.length
                         }
                     },
                     beginAtZero: true,
                     ticks: {
                         ...tickOptions,
                         precision,
-                        autoSkip: true,
+                        stepSize: !truncateRows ? 1 : undefined,
+                        autoSkip: !truncateRows ? false : undefined,
                         callback: function _renderYLabel(_, i) {
                             const d = datasets?.[0]
                             if (!d) {
@@ -738,10 +742,7 @@ export function LineGraph_({
     }, [datasets, hiddenLegendKeys, isDarkModeOn, trendsFilter, formula, showValueOnSeries, showPercentStackView])
 
     return (
-        <div
-            className={clsx('LineGraph w-full h-full overflow-hidden', { absolute: !inSurveyView })}
-            data-attr={dataAttr}
-        >
+        <div className={clsx('LineGraph w-full grow relative overflow-hidden')} data-attr={dataAttr}>
             <canvas ref={canvasRef} />
             {showAnnotations && myLineChart && chartWidth && chartHeight ? (
                 <AnnotationsOverlay

posthog/hogql_queries/insights/trends/trends_query_runner.py

@@ -33,7 +33,7 @@
 from posthog.hogql_queries.insights.trends.display import TrendsDisplay
 from posthog.hogql_queries.insights.trends.trends_query_builder import TrendsQueryBuilder
 from posthog.hogql_queries.insights.trends.series_with_extras import SeriesWithExtras
-from posthog.hogql_queries.query_runner import QueryRunner
+from posthog.hogql_queries.query_runner import QueryRunner, RunnableQueryNode
 from posthog.hogql_queries.utils.formula_ast import FormulaAST
 from posthog.hogql_queries.utils.query_date_range import QueryDateRange
 from posthog.hogql_queries.utils.query_previous_period_date_range import (
@@ -812,3 +812,10 @@ def _trends_display(self) -> TrendsDisplay:
             display = self.query.trendsFilter.display
 
         return TrendsDisplay(display)
+
+    def apply_dashboard_filters(self, *args, **kwargs) -> RunnableQueryNode:
+        # Remove any set breakdown limit for display on the dashboard
+        if self.query.breakdownFilter:
+            self.query.breakdownFilter.breakdown_limit = None
+
+        return self.query