furo-ui5-chart #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-chart.js';
exports FuroUi5Chart js
exports <furo-ui5-chart> custom-element-definition
superclass LitElement

Summary: connect data to a chart

Description #

furo-ui5-chart connects data objects (repeaterNodes) with the charting lib.

Use multiple binders if you need more then one series per chart.

1
2
3
4
5
6
7

<furo-ui5-chart-display chart-type="bar">
   <furo-ui5-chart
       fn-bind-data="--projectDAO(*.entities)"
       data-field="data.cost_limit.units"
       category-field="data.description"
   ></furo-ui5-chart>
</furo-ui5-chart-display>

Simple line chart #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<furo-ui5-chart-display
    flex scroll
    chart-type="line"
    no-data-text="Press load data"
    fixed-height="250"
    tooltip
    grid
    legend>
    <furo-ui5-chart
       fn-bind-data="--projectDAO(*.entities)"
       data-field="data.cost_limit.units"
       category-field="data.description"
   ></furo-ui5-chart>
</furo-ui5-chart-display>

Bubble charts #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<furo-ui5-chart-display 
  chart-type="bubble" 
  data-labels="" 
  tooltip=""  
  legend="" 
  fixed-height="300">   
      <furo-ui5-chart 
        fn-bind-data="--projectDAO(*.entities)" 
        data-field="data.start.day, data.end.day, data.start.day" 
        category-field="data.description" 
        axis-label="End" 
        legend-label="Group A"></furo-ui5-chart>
      <furo-ui5-chart 
        fn-bind-data="--projectDAO(*.entities)" 
        data-field="data.end.day,data.start.day, data.start.day" 
        category-field="data.description" 
        legend-label="Group B"></furo-ui5-chart>
    
</furo-ui5-chart-display>

Sparkline #

1
2
3
4
5
6

<furo-ui5-chart-display chart-type="radar" sparkline="" fixed-height="145">
  <furo-ui5-chart 
    fn-bind-data="--projectDAO(*.entities)" 
    data-field="data.cost_limit.units"
    category-field="data.description"></furo-ui5-chart>
</furo-ui5-chart-display>

Attributes and Properties #

axisLabelOpposite #

axis-label-opposite Boolean

Put the axis label on the opposite site (usually right)

axisLabel #

axis-label String

Text for the y axis

axisLabelColor #

axis-label-color String

Custom color for the y axis description text

axisBorder #

axis-border Boolean

Show a border on the right side of the y axis descriptions and labels.

axisBorderColor #

axis-border-color String

Custom color for the border.

axisTicks #

axis-ticks Boolean

Show tick marks on the y axis.

axisTooltip #

axis-tooltip Boolean

Show a tooltip with the current value while hovering.

axisTicksColor #

axis-ticks-color String

Custom color for the ticks

seriesName #

series-name String

Series with same name will get the same y-axis

legendLabel #

legend-label String

Label the Series for the legend. This text is also shown on the tooltips. This is useful when you have more then one data series.

strokeWidth #

chart-stroke-width number default: 1

Define the thickness of the lines in px.

markerSize #

chart-marker-size number default: 0

Set the size of the markers (hover state) in px.

strokeCurve #

chart-curve string default: 'straight'

Define the curve style for line and area charts.

Possible values: smooth, straight, stepline

dataField #

data-field String

Define the data field or fields here. For most charts this is the y axis.

Some charts requires more then one data field (i.e. bubbles want at least 3 fields data-field="data.start.day, data.end.day, data.start.day" ).

categoryField #

category-field String

Define the category field here (only 1 field). You can think of this as it is the x axis for your chart.

chartType #

chart-type String

Use this for mixed charts scenarios only, prefer to define the chart-type on the chart-display. Specify the default type on the display and set the custom type on this binder.

chartColor #

chart-color String

If you need to give an explicit color for the series you can use this attribute.

xaxis #

xaxis String

Events #

data-point-clicked #

at-data-point-clicked → Fieldnode

Fired when a marker for this data source was clicked

data-updated #

at-data-updated → data-series

Fired when datasource has updated data

Methods #

bindData #

bindData(data RepeaterNode ) ⟹ void

RepeaterNode → fn-bind-data

Binds a RepeaterNode to the component.

Supported types: repeated types

• data