fc-chart

An element by Forter

Usage

<script>
   import '@forter/chart';
</script>

<fc-chart
  config={"xAxisType":"SINGLE_TIME_FIELD","series":[{"seriesType":"LINE","label":"AGGS.APPROVED.LABEL","aggregation":{"key":"APPROVED","filters":{},"dimensions":[{"key":"TRANS_TIME","label":"DIMENSION.TRANS_TIME.LABEL"}],"data":[{"dimensions":["2021/07/02"],"value":10,"formattedValue":10,"aggregationLabel":"Approved Tx"},{"dimensions":["2021/07/05"],"value":11,"formattedValue":11,"aggregationLabel":"Approved Tx"},{"dimensions":["2021/07/11"],"value":10,"formattedValue":10,"aggregationLabel":"Approved Tx"},{"dimensions":["2021/07/18"],"value":12,"formattedValue":12,"aggregationLabel":"Approved Tx"}]}}]}
>
</fc-chart>

Properties

| Property | Attribute | Type | Default | |----------------------------------|----------------------------------|-----------|---------| | config | config | {} | {} | | configHash | configHash | string | | | currentBuilder | | any | | | disabled | disabled | boolean | false | | isLegendBoxOpen | isLegendBoxOpen | boolean | true | | isLegendExpandIndicatorVisible | isLegendExpandIndicatorVisible | boolean | true | | isLegendHidden | isLegendHidden | boolean | false | | loading | loading | boolean | false | | previewMode | preview-mode | boolean | false | | type | type | string | "line" |

CSS Custom Properties

| Property | Description | |-----------------------------|---------------------------------| | --fc-chart-disabled-color | disabled color. example: gray |