# Chart (part of package '[Chart JS](/reference/servoyextensions/packages/ui-component-packages/chart-js.md)')\ Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\ Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md) This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components). ## Properties ### backgroundColor Data provider for the chart's background color. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider) *** ### backgroundColorScheme The color scheme to use for the chart's background. Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: "default\_color\_scheme" *** ### borderColor Data provider for the chart's border color. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider) *** ### borderWidth Data provider for the width of the chart's border. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider) *** ### foundset The foundset containing the data for the chart. Type: [JSFoundset](/reference/servoycore/dev-api/database-manager/jsfoundset.md) *** ### hoverBackgroundColor Data provider for the chart's hover background color. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider) *** ### hoverBorderColor Data provider for the chart's hover border color. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider) *** ### hoverBorderWidth Data provider for the width of the chart's hover border. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider) *** ### legendLabel Data provider for the legend label of the chart. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#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](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 300 *** ### styleClass CSS style classes applied to the chart component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#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](/reference/servoycore/dev-api/js-lib/string.md) 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](/reference/servoycore/dev-api/js-lib/number.md)} dataset\_index The index of the dataset within the chart. > * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} index The index of the clicked data point within the dataset. > * {[String](/reference/servoycore/dev-api/js-lib/string.md)} label The label associated with the clicked data point. > * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} value The value of the clicked data point. > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} 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](/reference/servoycore/dev-api/js-lib/string.md) Generated legend as a HTML string. *** ### getChartAsImage() Return image as bass64 **Returns:** [String](/reference/servoycore/dev-api/js-lib/string.md) 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: ```js { labels: string, datasets: [{ label: string, data: array, fill: boolean, borderColor: 'rgb(75, 192, 192)', tension: number }] } ``` See **Parameters:** > * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} 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 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](/reference/servoycore/dev-api/js-lib/object.md)} 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](/reference/servoycore/dev-api/js-lib/object.md)} plugin An object defining the plugin configuration, including hooks like \`beforeDraw\` or \`afterRender\`. *** *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.servoy.com/reference/servoyextensions/ui-components/visualization/chart.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.