{"result":{"depiction_url":null,"edges":{"in_module":{"objects":[{"created":"2026-09-15T12:30:11Z","object_id":{"id":1296,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_base","title":"mod_base","uri":"https:\/\/zotonic.com\/id\/1296"},"seq":1}],"predicate":{"id":333,"is_a":["meta","predicate"],"name":"in_module","title":{"_type":"trans","tr":{"en":"In module"}},"uri":"https:\/\/zotonic.com\/id\/in_module"}},"subject":{"objects":[{"created":"2026-09-15T12:30:11Z","object_id":{"id":2555,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_reference","title":"Reference","uri":"https:\/\/zotonic.com\/id\/2555"},"seq":1},{"created":"2026-09-15T12:30:11Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-09-15T12:30:11Z","object_id":{"id":2583,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_user_interface_and_interaction","title":"User interface and interaction","uri":"https:\/\/zotonic.com\/id\/2583"},"seq":3},{"created":"2026-09-15T12:30:11Z","object_id":{"id":2623,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_scomp","title":"Server component","uri":"https:\/\/zotonic.com\/id\/2623"},"seq":4},{"created":"2026-09-15T12:30:11Z","object_id":{"id":2641,"is_a":["categorization","keyword","keyword_task"],"name":"zotonic_topic_render","title":"Render","uri":"https:\/\/zotonic.com\/id\/2641"},"seq":5},{"created":"2026-09-15T12:30:11Z","object_id":{"id":2665,"is_a":["categorization","keyword","keyword_data_type"],"name":"zotonic_topic_structured_data","title":"Structured data","uri":"https:\/\/zotonic.com\/id\/2665"},"seq":6},{"created":"2026-09-15T12:30:11Z","object_id":{"id":2687,"is_a":["categorization","keyword","keyword_quality"],"name":"zotonic_topic_accessibility","title":"Accessibility","uri":"https:\/\/zotonic.com\/id\/2687"},"seq":7}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":2697,"is_a":["text","documentation","reference","template_scomp"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/2697"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_template_scomp_scomp_chart","page_url":{"en":"https:\/\/zotonic.com\/docs\/2697\/chart","x-default":"https:\/\/zotonic.com\/docs\/2697\/chart"},"preview_url":null,"resource":{"version":32,"pivot_location_lat":null,"title":"chart","is_authoritative":true,"body":"

Render a chart without JavaScript, CSS, external services, or external assets.<\/p>\n

The data<\/code> argument can be a list of {Label, Value}<\/code> tuples, [Label, Value]<\/code>\nlists, or maps with label<\/code> and value<\/code> keys and an optional color<\/code>. Numeric\nvalues can be numbers or strings. It can also be a map where each key is a\nlabel and each value is its chart value:<\/p>\n

For example:<\/p>\n

{% chart type="pie"\n         title=_"Responses"\n         data=[["Yes", 42], ["No", 8]] %}\n\n{% chart type="pie" data=[\n    %{ "label": _"Yes", "value": "42", "color": "#4477aa" },\n    %{ "label": _"No", "value": "8" }\n] %}\n\n{% chart type="pie" data=%{"Yes": 42, "No": 8} %}\n<\/code><\/pre>\n
If data<\/code> is not supplied, the labels<\/code> and values<\/code> lists are zipped. Values\nmust be finite numbers. Generated data tables include the same color swatches\nas categorical charts, so every value can be matched to its chart mark.<\/p>\n
Supported types are pie<\/code>, donut<\/code>, horizontal_bar<\/code>, vertical_bar<\/code>, and\nline<\/code>. The optional arguments are:<\/p>\n
Argument<\/th>Description<\/th><\/tr><\/thead>
title<\/code><\/td>Accessible chart title and table caption.<\/td><\/tr>
data<\/code><\/td>Label\/value rows or a map of labels to values. Row maps can set color<\/code>.<\/td><\/tr>
labels<\/code><\/td>Labels to zip with values<\/code> when data<\/code> is not supplied.<\/td><\/tr>
values<\/code><\/td>Values to zip with labels<\/code> when data<\/code> is not supplied.<\/td><\/tr>
width<\/code><\/td>View box width, clamped between 64 and 4096. Defaults to 400.<\/td><\/tr>
height<\/code><\/td>View box height, clamped between 64 and 4096. Defaults to 240.<\/td><\/tr>
color<\/code><\/td>One hexadecimal RGB color. Data points use brightness variations of this color.<\/td><\/tr>
palette<\/code><\/td>List of hexadecimal RGB colors. Later points use shades when the list is exhausted. Invalid colors are ignored.<\/td><\/tr>
colors<\/code><\/td>Backwards-compatible alias for palette<\/code>.<\/td><\/tr>
sort<\/code><\/td>Sort with -value<\/code>, +value<\/code>, -label<\/code>, or +label<\/code>. A missing sign means ascending; the bare flag means -value<\/code>.<\/td><\/tr>
class<\/code><\/td>Additional classes on the generated figure<\/code>.<\/td><\/tr>
label_header<\/code><\/td>Header for the label column in the data table.<\/td><\/tr>
value_header<\/code><\/td>Header for the value column in the data table.<\/td><\/tr>
hide_table<\/code><\/td>Do not generate a table. Use only when the data is already shown in a table.<\/td><\/tr>
legend<\/code><\/td>auto<\/code> by default. With a hidden table, pie and donut charts get a color key. Set to true or false to override.<\/td><\/tr>
show_labels<\/code><\/td>Show outside labels with leader lines. Enabled by default for pie and donut charts; set to false to hide them.<\/td><\/tr>
label_min_percent<\/code><\/td>Combine pie and donut values below this percentage into Other<\/code>. Defaults to 0.<\/td><\/tr>
max_pie_values<\/code><\/td>Number of highest original pie or donut values to retain before combining the rest into Other<\/code>. Defaults to 50; clamped between 1 and 1000.<\/td><\/tr>
aria_describedby<\/code><\/td>Id of an existing table or description for the SVG.<\/td><\/tr><\/tbody><\/table>\n
Color selection uses color<\/code>, palette<\/code>, colors<\/code>, the optional\nsite.chart_palette<\/code> configuration, and finally the built-in palette, in\nthat order. The configured palette is a comma or whitespace separated list.<\/p>\n
For security and predictable rendering, at most 1000 data points are used,\nlabels are truncated, zero values are omitted from pie and donut charts, and\nthose charts retain a bounded number of highest values and combine the rest\ninto Other<\/code>. The Other<\/code> category stays at the low-value end of the ordering\ninstead of being sorted by its aggregate value.\nArbitrary SVG\/CSS is not accepted, and the component is\nnever cached independently. The component only renders supplied data and does\nnot perform data access or authorization.<\/p>","slug":"chart","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"doc_source_hash":"589eef7395f4986055b95df546346ac61a30b2bb2f4a5429c07316d00fee823c","is_featured":false,"content_group_id":{"id":2551,"is_a":["meta","content_group"],"name":"content_group_imported_docs","title":"Imported documentation","uri":"https:\/\/zotonic.com\/id\/content_group_imported_docs"},"category_id":{"id":327,"is_a":["meta","category"],"name":"template_scomp","title":"Scomp","uri":"https:\/\/zotonic.com\/id\/template_scomp"},"doc_source_path":"apps\/zotonic_mod_base\/src\/scomps\/scomp_base_chart.erl","publication_start":"2026-09-15T12:30:11Z","github_url":"https:\/\/github.com\/zotonic\/zotonic\/blob\/master\/apps\/zotonic_mod_base\/src\/scomps\/scomp_base_chart.erl","pivot_location_lng":null,"doc_source_kind":"scomp","name":"doc_template_scomp_scomp_chart","is_unfindable":false,"is_published":true,"pivot_geocode":null,"created":"2026-09-15T12:30:11Z","uri":null,"doc_status":"current","is_dependent":false,"erlang_app":"zotonic_mod_base","publication_end":"9999-06-01T00:00:00Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"privacy":0,"doc_source_commit":"b0f0601afc7bce212e638deb35a03ba89b57922f\n","erlang_module":"scomp_base_chart","creator_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"modified":"2026-10-05T18:39:22Z","title_slug":"chart"},"uri":"https:\/\/zotonic.com\/id\/2697","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/2697"}},"status":"ok"}