@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
68 lines (61 loc) • 4.09 kB
Markdown
<iframe width="100%" height="550" frameborder="0" src="https://embed.plnkr.co/ULbzY7ZmdugBRrb8SgdQ?show=preview"></iframe>
| 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 | object | | custom colors for the chart. Used to override a color for a specific value |
| legend | boolean | false | show or hide the legend |
| 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 |
| 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 |
| 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 |
| curve | function | | the interpolation function used to generate the curve. It accepts any [d3.curve](https://github.com/d3/d3-shape#curves) function |
| gradient | boolean | false | fill elements with a gradient instead of a solid color |
| activeEntries | object[] | [] | elements to highlight |
| Property | Description |
|--------------|------------------------------------------|
| select | click event |
| activate | element activation event (mouse enter) |
| deactivate | element deactivation event (mouse leave) |
# Data Format
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
}
]
}
]
```