diff --git a/frontend/src2/charts/components/BarChartConfigForm.vue b/frontend/src2/charts/components/BarChartConfigForm.vue
index 201699ef..c19afd85 100644
--- a/frontend/src2/charts/components/BarChartConfigForm.vue
+++ b/frontend/src2/charts/components/BarChartConfigForm.vue
@@ -52,6 +52,12 @@ watchEffect(() => {
+
diff --git a/frontend/src2/charts/helpers.ts b/frontend/src2/charts/helpers.ts
index 2ddf6f0e..3315ed7e 100644
--- a/frontend/src2/charts/helpers.ts
+++ b/frontend/src2/charts/helpers.ts
@@ -148,6 +148,16 @@ export function getBarChartOptions(config: BarChartConfig, result: QueryResult,
const hasRightAxis = config.y_axis.series.some((s) => s.align === 'Right')
const yAxis = !hasRightAxis ? [leftYAxis] : [leftYAxis, rightYAxis]
+ const labelRotation = Math.max(0, Math.min(config.label_rotation || 0, 90))
+
+ const updatedXAxis = {
+ ...xAxis,
+ axisLabel: {
+ ...(xAxis.axisLabel || {}),
+ rotate: labelRotation,
+ },
+ }
+
const sortedRows = xAxisIsDate
? _rows.sort((a, b) => {
const a_date = new Date(a[config.x_axis.dimension_name])
@@ -186,8 +196,8 @@ export function getBarChartOptions(config: BarChartConfig, result: QueryResult,
animationDuration: 700,
color: colors,
grid: getGrid({ show_legend }),
- xAxis: swapAxes ? yAxis : xAxis,
- yAxis: swapAxes ? xAxis : yAxis,
+ xAxis: swapAxes ? yAxis : updatedXAxis,
+ yAxis: swapAxes ? updatedXAxis : yAxis,
series: number_columns.map((c, idx) => {
const serie = getSerie(config, c.name)
const is_right_axis = serie.align === 'Right'
@@ -266,6 +276,10 @@ function getXAxis(options: XAxisCustomizeOptions = {}) {
splitLine: { show: false },
axisLine: { show: true },
axisTick: { show: false },
+ axisLabel: {
+ show: true,
+ rotate: 0,
+ },
}
}
diff --git a/frontend/src2/types/chart.types.ts b/frontend/src2/types/chart.types.ts
index 1776bec7..ddb7671b 100644
--- a/frontend/src2/types/chart.types.ts
+++ b/frontend/src2/types/chart.types.ts
@@ -1,4 +1,4 @@
-import { Dimension, Measure } from "./query.types"
+import { Dimension, Measure } from './query.types'
export const AXIS_CHARTS = ['Bar', 'Line', 'Row']
export type AxisChartType = (typeof AXIS_CHARTS)[number]
@@ -51,6 +51,7 @@ export type SeriesBar = Series & {
export type BarChartConfig = AxisChartConfig & {
y_axis: YAxisBar
+ label_rotation?: number
}
export type LineChartConfig = AxisChartConfig & {
y_axis: YAxisLine
@@ -83,7 +84,7 @@ export type DonutChartConfig = {
label_column: Dimension
value_column: Measure
legend_position?: 'top' | 'bottom' | 'left' | 'right'
- show_inline_labels?: boolean;
+ show_inline_labels?: boolean
}
export type FunnelChartConfig = {
label_column: Dimension
@@ -100,4 +101,10 @@ export type TableChartConfig = {
enable_color_scale?: boolean
}
-export type ChartConfig = LineChartConfig | BarChartConfig | NumberChartConfig | DonutChartConfig | TableChartConfig | FunnelChartConfig
+export type ChartConfig =
+ | LineChartConfig
+ | BarChartConfig
+ | NumberChartConfig
+ | DonutChartConfig
+ | TableChartConfig
+ | FunnelChartConfig
\ No newline at end of file