Scrollable Bar Chart
It can be challanging to display data properly if there are many data points. One option is to reduce the size of bars, but that works only up to the point. The other option is to display top N results and optionally group the rest in the "Other" category. The third option is to introduce vertical scrolling. This approach works similar to the top N approach, however, all results are there and the number of visible items depends only on available screen real-estate.
<Legend horizontal style="margin-bottom: 16px" />
<ContentPlaceholderScope name="xAxis">
<div style="overflow-y: auto; max-height: 500px">
<Svg style={{ width: "auto", height: { expr: "{$page.points.length} * 30" } }}>
<Chart offset="1 -20 0 150" axes={{
x: {
type: NumericAxis,
snapToTicks: 1,
putInto: "xAxis",
anchors: "0 1 0 0",
offset: "-1 0 0 0"
},
y: { type: CategoryAxis, vertical: true }
}}>
<Gridlines />
<BarGraph
data-bind="$page.points"
colorIndex={0}
name="V1"
size={0.3}
offset={-0.15}
xField="v1"
selection={{
type: KeySelection,
bind: '$page.selected.y',
keyField: 'y'
}}
/>
<BarGraph
data-bind="$page.points"
colorIndex={6}
name="V2"
size={0.3}
offset={+0.15}
xField="v2"
selection={{
type: KeySelection,
bind: '$page.selected.y',
keyField: 'y'
}}
/>
</Chart>
</Svg>
</div>
<div style="margin-top: -1px">
<Svg style="height: 50px; width: auto">
<ContentPlaceholder name="xAxis" />
</Svg>
</div>
</ContentPlaceholderScope>