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: foundset

---

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: int 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()

---

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

Parameters:

• {int} dataset_index

• {int} index

• {string} label

• {int} value

• {JSEvent} event

---

API

clearChart()

Clears the chart and data.

---

drawChart()

(re)draw the chart

---

generateLegend()

return legend

Returns: string

---

getChartAsImage()

return image as bass64

Returns: 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 Data

---

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 Options

---

setPlugin(plugins)

Parameters:

• {object} plugins

---

---