Chart

(part of package 'Chart JS') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

This is a reference page; many components have detailed usage guides here.

Properties

backgroundColor

Type: Dataprovider

---

backgroundColorScheme

Type: String Default Value: "default_color_scheme"

---

borderColor

Type: Dataprovider

---

borderWidth

Type: Dataprovider

---

foundset

Type: JSFoundset

---

hoverBackgroundColor

Type: Dataprovider

---

hoverBorderColor

Type: Dataprovider

---

hoverBorderWidth

Type: Dataprovider

---

legendLabel

Type: Dataprovider

---

responsiveHeight

Charts height to be set in a responsive form. When responsiveHeight is set to 0, the table will use 100% height of the parent container

Type: Number Default Value: 300

---

styleClass

Type: Styleclass

---

type

HORIZONTAL BAR is no longer available on the latest ChartJS, please read the ChartJS documentation for replacing this type on TiNG

Type: String Default Value: "pie"

---

Events

onChartDrawn()

This event fires once a chart has finished rendering. Typically happens when data is changed or options sent to the chart causes it to re-render. Can be useful if we need to wait for multiple charts to finish completely before showing a form or other UI components.

---

onClick(dataset_index,index,label,value,event)

Parameters:

• {Number} dataset_index

• {Number} index

• {String} label

• {Number} value

• {JSEvent} event

---

API

clearChart()

Clears the chart and data.

---

drawChart()

(re)Draw the chart

---

generateLegend()

Return legend

@deprecated

Returns: String

---

getChartAsImage()

Return image as bass64

Returns: String The chart rendered as a base64-encoded image string.

---

refreshChart()

Refresh the chart (if options updated)

---

setData(data)

Sets the data for this chart. Should be an object that like:

{ 
    labels: string<array>,
    datasets: [{
      label: string,
      data: array<object>,
      fill: boolean,
      borderColor: 'rgb(75, 192, 192)',
      tension: number
    }]
}

See https://www.chartjs.org/docs/latest/general/data-structures.html

Parameters:

• {Object} data An object containing the chart data, including labels and datasets, structured according to Chart.js data model requirements.

---

setOptions(options)

sets the options for this chart.

see https://www.chartjs.org/docs/latest/configuration/ for more info (this sets the options part of the configuration), some options can also be set through the setData() to be specific to that dataset.

Parameters:

• {Object} options An object containing configuration options for the chart, such as layout, scales, and plugins, based on Chart.js options documentation.

---

setPlugin(plugin)

Sets the plugins for the chart. Plugins allow you to extend or modify the behavior and appearance of the chart.

Parameters:

• {Object} plugin An object defining the plugin configuration, including hooks like `beforeDraw` or `afterRender`.

---

---