Skip to content

Adjust height in components to avoid scroll bars. #281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
khathija-ahamadi wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Adjust height in components to avoid scroll bars. #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
590720d
Adjust height in components to avoid scroll bars.
khathija-ahamadi Aug 24, 2026
0abbf71
Merge branch 'main' into fix-4489-scroll-preview-echarts
khathija-ahamadi Aug 25, 2026
b590287
Height adjusted in preview for the overview charts.
khathija-ahamadi Aug 26, 2026
60d7130
Merge branch 'fix-4489-scroll-preview-echarts' of https://github.com/…
khathija-ahamadi Aug 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/components/bar-chart/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import EchartsBarHorizontalStackedPlayground from '@site/docs/autogenerated/play

Common bar charts normally compare the values of different categories where the length of the bars are proportional to their values.

<EchartsBarSimplePlayground height="40rem" />
<EchartsBarSimplePlayground height="41rem" />

## Stacked bar chart

Expand Down
4 changes: 2 additions & 2 deletions docs/components/charts-overview/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ Example: last year and current year.

![Colors for comparative data](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3225-2885&t=MD9MvUCkoIcmSi8H-4)

<EchartsPlayground height="40rem" />
<EchartsPlayground height="42rem" />

## Loading indicators

Expand All @@ -84,7 +84,7 @@ A loading indicator provides users with visual feedback that the chart is being

An empty state occurs when a user first opens an application, no data is available, or the user has filtered out all data. The empty state should be visually distinct from the loading state and should provide a clear message to the user. This message should explain why the empty state is being displayed and provide guidance on how to proceed.

<EchartsEmptyStatePlayground height="40rem" />
<EchartsEmptyStatePlayground height="53rem" />

## Failure and error messages

Expand Down
2 changes: 1 addition & 1 deletion docs/components/chat/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@ import PropsApi from '@site/docs/autogenerated/api/ix-chat/api.mdx';

## Basic

<ChatPlayground height="40rem" />
<ChatPlayground height="62rem" />

<PropsApi />
2 changes: 1 addition & 1 deletion docs/components/checkbox/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Enclosing related checkboxes within a single checkbox group container ensures co

## Indeterminate group

<FormCheckboxGroupIndeterminatePlayground />
<FormCheckboxGroupIndeterminatePlayground height="10rem" />

## Validation

Expand Down
4 changes: 2 additions & 2 deletions docs/components/pie-chart/overview.mdx
View file
Open in desktop
Comment thread
khathija-ahamadi marked this conversation as resolved.
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ import EchartsCirclePlayground from '@site/docs/autogenerated/playground/echarts

## Basic

<EchartsPiePlayground height="40rem" />
<EchartsPiePlayground height="41rem" />

## Donut charts

Donut charts are a variation of pie charts that have a hole in the center. Donut charts are often used to display the same information as a pie chart, but additional information can be displayed in the center of the chart.
Comment thread
coderabbitai[bot] marked this conversation as resolved.

<EchartsCirclePlayground height="40rem" />
<EchartsCirclePlayground height="41rem" />
4 changes: 2 additions & 2 deletions docs/components/special-chart/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ Apache ECharts offers a versatile toolbox that enables users to interact with an

Below is an example demonstrating some of the most commonly used tools and how you can configure them.

<EchartsSpecialToolboxPlayground height="40rem" />
<EchartsSpecialToolboxPlayground height="41rem" />

## Advanced zoom and pan

In addition to the toolbox, ECharts provides zoom and pan functionality for a more interactive chart experience.
Users can zoom in and out using the mouse wheel, and pan the chart by clicking and dragging. These advanced features offer a seamless way to explore detailed data within the chart.

<EchartsSpecialZoomPlayground height="40rem" />
<EchartsSpecialZoomPlayground height="41rem" />
2 changes: 1 addition & 1 deletion docs/components/tree/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import TreeCustomPlayground from '@site/docs/autogenerated/playground/tree-custo

## Custom tree node

<TreeCustomPlayground height="12rem" />
<TreeCustomPlayground height="13rem" />

<PropsApi />
<TreeItemPropsApi />
Loading