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

Data provider for the chart's background color. Type: Dataprovider

---

backgroundColorScheme

The color scheme to use for the chart's background. Type: String Default Value: "default_color_scheme"

---

borderColor

Data provider for the chart's border color. Type: Dataprovider

---

borderWidth

Data provider for the width of the chart's border. Type: Dataprovider

---

foundset

The foundset containing the data for the chart. Type: JSFoundset

---

hoverBackgroundColor

Data provider for the chart's hover background color. Type: Dataprovider

---

hoverBorderColor

Data provider for the chart's hover border color. Type: Dataprovider

---

hoverBorderWidth

Data provider for the width of the chart's hover border. Type: Dataprovider

---

legendLabel

Data provider for the legend label of the chart. 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

CSS style classes applied to the chart component. 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()

Called when the chart has finished drawing.

---

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

Called when a chart element is clicked.

Parameters:

• {Number} dataset_index The index of the dataset within the chart.

• {Number} index The index of the clicked data point within the dataset.

• {String} label The label associated with the clicked data point.

• {Number} value The value of the clicked data point.

• {JSEvent} event The event object associated with the click.

---

API

clearChart()

Clears the chart and data.

---

drawChart()

(re)Draw the chart

---

generateLegend()

Return legend

Returns: String Generated legend as a HTML 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`.

---

---