Merge pull request #413 from UmakanthKaspa/feature/add-data-labels-to…

…-bar-chart feat(v2): add data labels to bar charts
frappe · Jan 1, 2025 · ae82d31 · ae82d31
2 parents 1e8c0f4 + 1719c63
commit ae82d31
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/frontend/src/widgets/AxisChart/getAxisChartOptions.js b/frontend/src/widgets/AxisChart/getAxisChartOptions.js
@@ -177,12 +177,12 @@ function makeOptions(chartType, labels, datasets, options) {
 			areaStyle:
 				dataset.series_options.showArea || options.showArea
 					? {
-							color: new graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: dataset.series_options.color || colors[index] },
-								{ offset: 1, color: '#fff' },
-							]),
-							opacity: 0.2,
-					  }
+						color: new graphic.LinearGradient(0, 0, 0, 1, [
+							{ offset: 0, color: dataset.series_options.color || colors[index] },
+							{ offset: 1, color: '#fff' },
+						]),
+						opacity: 0.2,
+					}
 					: undefined,
 			// bar styles
 			itemStyle: {
@@ -194,6 +194,17 @@ function makeOptions(chartType, labels, datasets, options) {
 			barMaxWidth: 50,
 			stack: options.stack ? 'stack' : null,
 		})),
+
+		label: {
+			show: options.show_data_labels,
+			position: 'inside',
+			formatter: (params) => {
+				const value = params.value;
+				return !isNaN(value) ? getShortNumber(value, 1) : value;
+			},
+			fontSize: 12,
+			color: '#333',
+		},
 		legend: {
 			icon: 'circle',
 			type: 'scroll',
@@ -216,14 +227,14 @@ function makeOptions(chartType, labels, datasets, options) {
 function getMarkLineOption(options) {
 	return options.referenceLine
 		? {
-				data: [
-					{
-						name: options.referenceLine,
-						type: options.referenceLine.toLowerCase(),
-						label: { position: 'middle', formatter: '{b}: {c}' },
-					},
-				],
-		  }
+			data: [
+				{
+					name: options.referenceLine,
+					type: options.referenceLine.toLowerCase(),
+					label: { position: 'middle', formatter: '{b}: {c}' },
+				},
+			],
+		}
 		: {}
 }
 

diff --git a/frontend/src/widgets/Bar/BarOptions.vue b/frontend/src/widgets/Bar/BarOptions.vue
@@ -19,5 +19,6 @@ const props = defineProps({
 
 		<Checkbox v-model="options.stack" label="Stack Values" />
 		<Checkbox v-model="options.roundedBars" label="Rounded Bars" />
+		<Checkbox v-model="options.show_data_labels" label="Show Data Labels" />
 	</div>
 </template>
diff --git a/frontend/src/widgets/Row/RowOptions.vue b/frontend/src/widgets/Row/RowOptions.vue
@@ -12,5 +12,6 @@ const props = defineProps({
 		<AxisChartOptions seriesType="bar" v-model:options="options" :columns="props.columns" />
 		<Checkbox v-model="options.stack" label="Stack Values" />
 		<Checkbox v-model="options.roundedBars" label="Rounded Bars" />
+		<Checkbox v-model="options.show_data_labels" label="Show Data Labels" />
 	</div>
 </template>