Stacked Area Chart
Property | Type | Default Value | Description |
view | number[] | ​ | the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size |
results | object[] | ​ | the chart data |
scheme | object | ​ | the color scheme of the chart |
schemeType | string | 'ordinal' | the color scale type. Can be either 'ordinal' or 'linear' |
customColors | function or object | ​ | custom colors for the chart. Used to override a color for a specific value |
animations | boolean | true | enable animations |
legend | boolean | false | show or hide the legend |
legendTitle | string | 'Legend' | the legend title |
legendPosition | string | 'right' | the legend position ['right', 'below'] |
xAxis | boolean | false | show or hide the x axis |
yAxis | boolean | false | show or hide the y axis |
showGridLines | boolean | true | show or hide the grid lines |
roundDomains | boolean | false | round domains for aligned gridlines |
showXAxisLabel | boolean | false | show or hide the x axis label |
showYAxisLabel | boolean | false | show or hide the y axis label |
xAxisLabel | string | ​ | the x axis label text |
yAxisLabel | string | ​ | the y axis label text |
trimXAxisTicks | boolean | true | trim or not ticks on the x axis |
trimYAxisTicks | boolean | true | trim or not ticks on the Y axis |
rotateXAxisTicks | boolean | true | enable automic rotation of x-axis ticks to prevent overlaps |
maxXAxisTickLength | number | 16 | max length of the ticks. If |
maxYAxisTickLength | number | 16 | max length of the ticks. If |
xAxisTickFormatting | function | ​ | the x axis tick formatting |
yAxisTickFormatting | function | ​ | the y axis tick formatting |
xAxisTicks | any[] | ​ | predefined list of x axis tick values |
yAxisTicks | any[] | ​ | predefined list of y axis tick values |
timeline | boolean | false | display a timeline control under the chart. Only available if x scale is date |
autoScale | boolean | false | set the minimum value of the y axis to the minimum value in the data, instead of 0 (ignored if yScaleMin is defined) |
curve | function | ​ | the interpolation function used to generate the curve. It accepts any d3.curve function |
gradient | boolean | false | fill elements with a gradient instead of a solid color |
activeEntries | object[] | [] | elements to highlight |
tooltipDisabled | boolean | false | show or hide the tooltip |
tooltipTemplate | TemplateRef | ​ | a custom ng-template to be displayed inside the tooltip when hovering a single point |
seriesTooltipTemplate | TemplateRef | ​ | a custom ng-template to be displayed inside the tooltip when hovering series |
xScaleMin | any | ​ | the minimum value of the x axis (if the x scale is linear or time) |
xScaleMax | any | ​ | the maximum value of the x axis (if the x scale is linear or time) |
yScaleMin | number | ​ | the minimum value of the y axis |
yScaleMax | number | ​ | the maximum value of the y axis |
Property | Description |
select | click event |
activate | element activation event (mouse enter) |
deactivate | element deactivation event (mouse leave) |
The data format is multi series:
[{"name": "Germany","series": [{"name": "2010","value": 7300000},{"name": "2011","value": 8940000}]},​{"name": "USA","series": [{"name": "2010","value": 7870000},{"name": "2011","value": 8270000}]}]