> For the complete documentation index, see [llms.txt](https://docs.silkbuilder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.silkbuilder.com/tags/chart.md). # Chart This tag defines a Silk Chart component that implements the ChartJS object from . This class works standalone and is not a container. ## Tag Definition Used standalone: ```xml ``` ### Data Source The data is provided by a **silk:DataProvider**, which should contain two columns: one with labels and another with values. ```xml ``` ### JavaScript Object SilkBuilder also creates a companion JavaScript object using the [ChartJS](https://github.com/silkbuider/documentation/tree/master/js_object/ChartJS.js.md) class to provide JavaScript programmatic interaction. This object will have the same name as the component's ID. ```xml chart.on("click", function(index, value, label){ silk.alert(label+":"+value); }); ``` ## Properties ^\*Required property. ### id^\* The chart's unique identifier.\ Default Value: *Empty*. ### title Used to define the chart title.\ Default Value: *Empty*. ### titlePlace Sets the title's position\ Default Value: *top*. ### type Sets the chart's type. The values can be: bar, line, pie, and doughnut. Uses values from Default Value: *bar*. ### dataSource^\* Sets the dataSource providing the data to be used to populate the chart.\ Default Value: *Empty*. ### labelColumn^\* Sets the column from the dataSource providing the chart's labels.\ Default Value: *Empty*. ### dataColumn^\* Sets the column from the dataSource providing the chart's values.\ Default Value: *Empty*. ### backgroundColor Sets the chart background color.\ Default Value: *#1886C1*. ### grid Indicates if the chart will show a grid.\ Default Value: *true*. ### legend Indicates if the chart will show the legend.\ Default Value: *false*. ### renderIf It contains the logic sentence defining whether the component should be rendered.\ The logic statement's explanation is in the [Server Code Logic](https://github.com/silkbuider/documentation/tree/master/tags/how_to/server_code_logic.md) documentation.\ Default Value: *Empty*. ### parentList Defines the list triggering the chart's loading process.\ Default Value: *Empty*. ### indexAxis Sets the chart index axis.\ Default Value: *x*. ### tooltip Sets if the tool tips will be displayed\ Default Value: *false*. ### dataLabels Sets whether data labels will be displayed.<\ Default Value: *true*. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.silkbuilder.com/tags/chart.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.