furo-ui5-chart-display

furo-ui5-chart-display #

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

Summary: Display charts with data objects

Description #

The furo-ui5-chart-display is the render component to display charts with apex the apex charts lib ( https://github.com/apexcharts/apexcharts.js).

Use furo-ui5-chart to connect your data.

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>

Example mixed charts #

Attributes and Properties #

sparkline #

sparkline Boolean

Hides all elements of the chart other than the primary graphic. Use this to visualize data in very small areas.

xaxisTitle #

xaxis-title String

Give the x-axis a title which will be displayed below the axis labels by default.

xaxisDatetime #

xaxis-datetime Boolean

Set this to true if you have datetime, google.type.date or timestamp data on the x-axis

zebra #

zebra String

set zebra color like zebra="#f3f4f5, #fff" to get stripes

noDataText #

no-data-text String

Set the text to display, if no data is given.

If this option is not set, the default is No data.

legend #

legend Boolean

Enables the legend on bottom left with offset 0:0

dataLabels #

data-labels Boolean

Enable labels with data on every item.

tooltip #

tooltip Boolean

show a tooltip on mouseover

legendAlign #

legend-align String

Aligns the legend to left center right

default is left

legendPosition #

legend-position String

Set the position of the legend to top, right, bottom, left

Default is bottom

legendOffsetX #

legend-offset-x Number

Moves the legend in the x direction for n pixels from legend-position

legendOffsetY #

legend-offset-y Number

Moves the legend in the y direction for n pixels from legend-position

toolbar #

toolbar Boolean

Enables the toolbar

toolbarDownload #

toolbar-download Boolean

Enables the download option in the toolbar (svg,csv,png)

plotHorizontal #

plot-horizontal boolean

Enable this to draw the bars horizontally

grid #

grid Boolean

Draw the horizontal grid lines

chartType #

chart-type String

line, area, bar are mixable

radar, scatter, heatmap

pie donut polarArea radialBar can only consume 1 data series

stacked #

stacked Boolean

WORK IN PROGRESS Stacked bar charts are not mixable

titleText #

title-text String

Set the title.

titleAlign #

title-align String

Aligns the title. Possible values are ’left’, ‘center’, ‘right’

Default is left

titleOffsetX #

title-offset-x Number

Moves the title for n pixels on the x-axis from the alignment direction

titleOffsetY #

title-offset-y Number

Moves the title for n pixels on the y-axis from the alignment direction

fixedHeight #

fixed-height Number

Set a fixed height for the plot. Default is auto, this can be useful if you need to control the heights

apexOptions #

default: **{ series: [], yaxis: [], // belize qualitative color palette // node_modules/@ui5/webcomponents-theming/dist/themes/sap_fiori_3/css_variables.css colors: [ 'var(–sapChart_OrderedColor_1 , #5899da)', 'var(–sapChart_OrderedColor_2 , #e8743b)', 'var(–sapChart_OrderedColor_3 , #19a979)', 'var(–sapChart_OrderedColor_4 , #ed4a7b)', 'var(–sapChart_OrderedColor_5 , #945ecf)', 'var(–sapChart_OrderedColor_6 , #13a4b4)', 'var(–sapChart_OrderedColor_7 , #525df4)', 'var(–sapChart_OrderedColor_8 , #bf399e)', 'var(–sapChart_OrderedColor_9 , #6c8893)', 'var(–sapChart_OrderedColor_10 ,: #ee6868)', 'var(–sapChart_OrderedColor_11 ,: #2f6497)', ], noData: { text: 'No data.', align: 'center', verticalAlign: 'middle', offsetX: 0, offsetY: 0, style: { color: undefined, fontSize: '14px', fontFamily: undefined, }, }, chart: { // height: 550, fontFamily: 'var(–sapFontFamily, Helvetica, Arial, sans-serif)', foreColor: 'var(–sapTextColor)', type: 'line', stacked: false, background: 'unset', events: {}, toolbar: { show: false, // disable by default tools: { download: false, selection: true, zoom: true, zoomin: true, zoomout: true, pan: true, reset: true, }, }, sparkline: { enabled: false, }, }, grid: { show: false, // https://apexcharts.com/docs/options/grid/ // zebra // row: { // colors: ["#f3f4f5", "#fff"], // } }, dataLabels: { enabled: false, },

  title: {
    // text: &#39;XYZ - Analysis&#39;,
    align: &#39;left&#39;,
    // offsetX: 70,
  },
  stroke: {},

  tooltip: {
    enabled: false,
    fixed: {
      enabled: false,
      position: &#39;topLeft&#39;, // topRight, topLeft, bottomRight, bottomLeft
      offsetY: 30,
      offsetX: 160,
    },
  },
  legend: {
    show: false,
    position: &#39;bottom&#39;,
    horizontalAlign: &#39;left&#39;,
    offsetX: 0,
    offsetY: 0,
    formatter: (seriesName, opts) =&gt; {
      if (
        opts.w.config.yaxis[opts.seriesIndex] &amp;&amp;
        opts.w.config.yaxis[opts.seriesIndex].legendLabel
      ) {
        return [opts.w.config.yaxis[opts.seriesIndex].legendLabel];
      }
      return [seriesName];
    },
  },
  plotOptions: {},
  xaxis: {
    // type: &#34;datetime&#34;,

    // tickAmount: 6,
    title: {
      text: undefined,
    },
  },
}**</small>



Events #

data-point-clicked #

at-data-point-clicked → Fieldnode

Fired when a marker for this data source was clicked. Note: the event is fired from the furo-ui5-chart

Methods #