Installation
import { WrBarChart } from 'ngwr/bar-chart';
@Component({ imports: [WrBarChart] })
export class MyComponent {
protected readonly bars = [
{ label: 'Mon', value: 12 },
{ label: 'Tue', value: 18, color: 'var(--wr-color-success)' },
{ label: 'Wed', value: 9 },
{ label: 'Thu', value: 24, color: 'var(--wr-color-warning)' },
{ label: 'Fri', value: 17 },
{ label: 'Sat', value: 6 },
{ label: 'Sun', value: 11 },
];
}Basic
<wr-bar-chart [data]="bars" />API
Inputs of <wr-bar-chart>.
| Name | Description | Type | Default |
|---|---|---|---|
data | — | readonly WrBarChartDatum[] | [] |
color | Default bar colour when a datum has none. | string | primary |
showValues | Show value labels above each bar. | boolean | true |
height | Pixel height of the chart area. | number | 200 |
max | Explicit max value. 0 = auto. | number | 0 |
Types
Data shapes used by the inputs and outputs above.
interface WrBarChartDatum {
label: string;
value: number;
color?: string;
}| Name | Description | Type | Default |
|---|---|---|---|
WrBarChartDatum | One bar of data. | interface | — |
labelrequired | Category label under the bar. | string | — |
valuerequired | Bar magnitude. | number | — |
color | CSS color for the bar. | string | palette |