The Mixed Chart component for Retool Apps
A content area to display mixed charts.
The Mixed Chart component renders data on an x-axis and multiple y-axes, and it can combine several different chart types. Mixed Chart is useful for visualizing the relationship between several different datasets.
For more information about using the Mixed Chart component, refer to the charts guide.
Properties
All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.
barGap
The gap between bars relative to the size of the bars. This can be a number between 0 and 1.
| Type | number | ||||
| Format | Float | ||||
| Mutability |
| ||||
| Default | |
Examples
0.1
barGroupGap
The gap between bars in a group relative to the size of the bars. This can be any number between 0 and 1.
| Type | number | ||||
| Format | Float | ||||
| Mutability |
| ||||
| Default | |
Examples
0.1
barMode
The list of bar modes.
| Type | string | |||||||||||||||
| Format | Plain Text | |||||||||||||||
| Mutability |
| |||||||||||||||
| Allowed Values |
| |||||||||||||||
| Default | |
Examples
"stack"
barOrientation
The orientation of the bars.
| Type | string | |||||||||
| Format | Plain Text | |||||||||
| Mutability |
| |||||||||
| Allowed Values |
| |||||||||
| Default | |
Examples
"vertical"
chartType
The type of chart to display.
| Type | string | ||||||||||||||||||||||||||||||||||||||||||
| Format | Plain Text | ||||||||||||||||||||||||||||||||||||||||||
| Mutability |
| ||||||||||||||||||||||||||||||||||||||||||
| Allowed Values |
|
Examples
"bar"
clearOnEmptyData
Whether to clear the chart when the data is empty.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
hidden
Whether this object is hidden from view.
| Type | boolean | ||||||
| Format | True/False | ||||||
| Mutability |
| ||||||
| Default | |
Examples
true
id
The unique identifier (name).
| Type | string | ||||
| Format | Plain Text | ||||
| Mutability |
| ||||
| Default | |
Examples
query1
button1
isHiddenOnDesktop
Whether to show or hide this object in the desktop layout.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
isHiddenOnMobile
Whether to show or hide this object in the mobile layout.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
legendPosition
The position of the legend.
| Type | string | ||||||||||||||||||
| Mutability |
| ||||||||||||||||||
| Allowed Values |
|
maintainSpaceWhenHidden
Whether to take up space on the canvas if hidden is true.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
margin
The amount of margin to render outside.
| Type | string | |||||||||
| Format | Plain Text | |||||||||
| Mutability |
| |||||||||
| Allowed Values |
| |||||||||
| Default | |
Examples
4px 8px
rangeSlider
Whether to display a range slider.
| Type | boolean | ||||
| Mutability |
|
showInEditor
Whether the component remains visible in the editor if hidden is true.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
stackedBarTotalsDataLabelPosition
The position of the stack data labels on a stacked bar chart.
| Type | string | ||||||||
| Mutability |
| ||||||||
| Allowed Values |
|
style
Custom style options.
| Type | object | ||||
| Mutability |
|
toolbar
The toolbar configuration.
| Type | object | ||||
| Mutability |
|
Object Properties
showAutoscale
Whether to show the Autoscale button.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
|
Examples
true
showBoxSelect
Whether to show the Box select button.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
|
Examples
true
showLassoSelect
Whether to show the Lasso select button.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
|
Examples
true
showPan
Whether to show the Pan button.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
|
Examples
true
showResetViews
Whether to show the Reset view button.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
|
Examples
true
showToImage
Whether to show the Download as PNG button.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
|
Examples
true
showZoomIn
Whether to show the Zoom in button.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
|
Examples
true
showZoomOut
Whether to show the Zoom out button.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
|
Examples
true
showZoomSelect
Whether to show the Zoom select button.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
|
Examples
true
Object Properties
rangeMode
The range mode of the axis.
| Type | string | ||||||
| Mutability |
| ||||||
| Allowed Values |
|
scale
The scale of the axis.
| Type | string | ||||||||
| Mutability |
| ||||||||
| Allowed Values |
|
showGridLines
Whether to show grid lines on the axis.
| Type | boolean | ||||
| Mutability |
|
showTickLabels
Whether to show tick labels on the x-axis.
| Type | boolean | ||||
| Mutability |
|
showZeroLine
Whether to show the zero line on the x-axis.
| Type | boolean | ||||
| Mutability |
|
sort
The sorting of the axis.
| Type | string | ||||||||
| Mutability |
| ||||||||
| Allowed Values |
|
Object Properties
rangeMode
The range mode of the axis.
| Type | string | ||||||
| Mutability |
| ||||||
| Allowed Values |
|
scale
The scale of the axis.
| Type | string | ||||||||
| Mutability |
| ||||||||
| Allowed Values |
|
showGridLines
Whether to show grid lines on the axis.
| Type | boolean | ||||
| Mutability |
|
showTickLabels
Whether to show tick labels on the x-axis.
| Type | boolean | ||||
| Mutability |
|
showZeroLine
Whether to show the zero line on the x-axis.
| Type | boolean | ||||
| Mutability |
|
sort
The sorting of the axis.
| Type | string | ||||||||
| Mutability |
| ||||||||
| Allowed Values |
|
Object Properties
rangeMode
The range mode of the axis.
| Type | string | ||||||
| Mutability |
| ||||||
| Allowed Values |
|
scale
The scale of the axis.
| Type | string | ||||||||
| Mutability |
| ||||||||
| Allowed Values |
|
showGridLines
Whether to show grid lines on the axis.
| Type | boolean | ||||
| Mutability |
|
showTickLabels
Whether to show tick labels on the x-axis.
| Type | boolean | ||||
| Mutability |
|
showZeroLine
Whether to show the zero line on the x-axis.
| Type | boolean | ||||
| Mutability |
|
sort
The sorting of the axis.
| Type | string | ||||||||
| Mutability |
| ||||||||
| Allowed Values |
|
Methods
JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.
mixedChart.scrollIntoView()
Scrolls the canvas or parent container so that the selected component appears in the visible area.
mixedChart.scrollIntoView(options)
Parameters
Object Properties
behavior
The scroll behavior.
| Type | string | ||||||
| Allowed Values |
|
block
The scroll position relative to the component.
| Type | string | ||||||||||
| Allowed Values |
|
Examples
Scroll the minimum amount to immediately bring mixedChart into view.
mixedChart.scrollIntoView({behavior: 'auto', block: 'nearest'});
mixedChart.setHidden()
Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.
mixedChart.setHidden(hidden)
Parameters
Examples
true
Examples
Hide mixedChart.
mixedChart.setHidden(true);
Unhide mixedChart.
mixedChart.setHidden(false);
Events
Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.
| Event | Description |
|---|---|
| Clear | A value is cleared. |
| Hover | An item is hovered over. |
| Legend Click | A legend item is clicked or pressed. |
| Legend Double Click | A legend item is double-clicked or pressed. |
| Select | A value is selected. |
| Unhover | An item is no longer hovered over. |