Data label inside bar #1892
Data label inside bar #1892
Conversation
|
How to implement this new feature, Data Label inside the bar |
Hi AlejandroAgRa, I believe if you clone this branch kedij777:data_label_inside_bar, run it on your local laptop, click 'show data label' and change data label position to 'inside bar', you should be able to replicate the feature. |
| } | ||
|
|
||
| calculateWidth(value): number { | ||
| //for default font size of 11px, the width of a single digit number is 6.29 and width of comma is 3.21, the width of 'K','B','M' is about 5.66 |
There was a problem hiding this comment.
Add space after // to match coding style
| //for default font size of 11px, the width of a single digit number is 6.29 and width of comma is 3.21, the width of 'K','B','M' is about 5.66 | |
| // for default font size of 11px, the width of a single digit number is 6.29 and width of comma is 3.21, the width of 'K','B','M' is about 5.66 |
| @@ -97,6 +98,8 @@ export class SeriesHorizontal implements OnChanges { | |||
| @Input() showDataLabel: boolean = false; | |||
| @Input() dataLabelFormatting: any; | |||
| @Input() noBarWhenZero: boolean = true; | |||
| @Input() dataLabelPosition: string; | |||
|
|
|||
| @@ -47,6 +48,7 @@ export class BarLabelComponent implements OnChanges { | |||
| formatedValue: string; | |||
| transform: string; | |||
| textAnchor: string; | |||
| orginalVal: any; | |||
| if (this.value < 0) { | ||
| this.x = this.x - this.horizontalPadding; | ||
| this.textAnchor = 'end'; | ||
| var valueWidth = this.calculateWidth(this.value); |
There was a problem hiding this comment.
Use let instead of var to avoid issues related to scope and match coding style.
| @@ -1329,6 +1331,13 @@ <h3 (click)="optsVisible = !optsVisible" style="cursor: pointer"> | |||
| <option value="below">Below</option></select | |||
| ><br /> | |||
| </div> | |||
| <div *ngIf="chart.options.includes('dataLabelPosition')"> | |||
There was a problem hiding this comment.
The dropdown for data label position on the demo should be placed after the show data label checkbox for better user experience. Currently it's placed after legend position.
| @@ -18,6 +18,7 @@ const chartGroups = [ | |||
| 'showLegend', | |||
| 'legendTitle', | |||
| 'legendPosition', | |||
| 'dataLabelPosition', | |||
There was a problem hiding this comment.
Show data label is supported for 8 charts currently - standard, stacked, grouped vertical bar chart, standard stacked, grouped horizontal bar chart and negative stacked horizontal and vertical bar charts. However, data label inside bar is only supported for standard vertical and horizontal bar charts. Is it possible to add the feature to the rest of the charts that support data label?
What kind of change does this PR introduce? (check one with "x")
What is the current behavior? (You can also link to an open issue here)
Issue #1389
What is the new behavior?
Data label can be displayed inside the bar for vertical and horizontal bar chart. In the context of a vertical bar chart, when the data label's width exceeds the corresponding bar, the label will be abbreviated and displayed in a rounded format, for example, as "10k" instead of "10402".
Does this PR introduce a breaking change? (check one with "x")