docs(options): add docs for "icon-only" bars

hatemhosny · Sep 6, 2024 · 1d851d9 · 1d851d9
1 parent a5adf61
commit 1d851d9
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 4 deletions.
diff --git a/website/docs/documentation/options.md b/website/docs/documentation/options.md
@@ -516,12 +516,13 @@ See the guide on [`chart controls`](../guides/chart-controls.md) for other alter
 ### labelsPosition
 
 Sets the position of bar labels. If set to `"inside"`, the labels are positioned inside the bars.
-Otherwise, the labels are positioned on the left side of the bars.
+If set to `"outside"`, the labels are positioned on the left side of the bars.
+If set to `"none"`, the labels are not displayed (this can be useful to show icons only - see [example in gallery](../gallery/labels-position.md)).
 
 Note that if this is set to `"inside"` (default),
 bars with small width (low values) may have their labels partially invisible ([demo](../gallery/fixed-scale)).
 
-- Type: `"inside" | "outside"`
+- Type: `"inside" | "outside" | "none"`
 - Default: `"inside"`
 - Example: [view in gallery](../gallery/labels-position.md)
 

diff --git a/website/docs/gallery/_gallery-demos.ts b/website/docs/gallery/_gallery-demos.ts
@@ -368,6 +368,22 @@ export const labelsPosition: ChartProps = {
   labelsPosition: 'outside',
 };
 
+export const labelsPositionNone: ChartProps = {
+  label: 'Labels Position',
+  dataUrl: '/data/population.csv',
+  dataTransform: (data) =>
+    data.map((d) => ({
+      ...d,
+      icon: `https://flagsapi.com/${d.code}/flat/64.png`,
+    })),
+  title: 'World Population',
+  labelsPosition: 'none',
+  showIcons: true,
+  dynamicProps: {
+    dataTransform: `(data) => data.map((d) => ({ ...d, icon: \`https://flagsapi.com/\${d.code}/flat/64.png\` }))`,
+  },
+};
+
 export const loop: ChartProps = {
   label: 'Loop',
   dataUrl: '/data/population.csv',

diff --git a/website/docs/gallery/icons.md b/website/docs/gallery/icons.md
@@ -4,7 +4,7 @@ hide_table_of_contents: true
 ---
 
 import RacingBars from '../../src/components/RacingBars';
-import { icons } from './\_gallery-demos.ts';
+import { icons, labelsPositionNone } from './\_gallery-demos.ts';
 
 A demo showing the use of [icons](../guides/icons.md).
 
@@ -27,3 +27,14 @@ Notice setting [`labelsPosition`](../documentation/options.md#labelsposition) to
 
 You may also use the [`dataTransform`](../documentation/options.md#datatransform) option for data transformation,
 like in [this example](./data-transform.md).
+
+### Show icons only
+
+Bars can have icons only (without labels), by combining the `showIcons: true` option with `labelsPosition: 'none'`.
+
+<div className="gallery">
+  <RacingBars
+    {...labelsPositionNone}
+/>
+
+</div>
diff --git a/website/docs/gallery/labels-position.md b/website/docs/gallery/labels-position.md
@@ -4,7 +4,7 @@ hide_table_of_contents: true
 ---
 
 import RacingBars from '../../src/components/RacingBars';
-import { labelsPosition } from './\_gallery-demos.ts';
+import { labelsPosition, labelsPositionNone } from './\_gallery-demos.ts';
 
 A demo for using [`labelsPosition`](../documentation/options.md#labelsposition).
 
@@ -31,3 +31,14 @@ A demo for using [`labelsPosition`](../documentation/options.md#labelsposition).
 />
 
 </div>
+
+## labelsPosition: 'none'
+
+### Chart
+
+<div className="gallery">
+  <RacingBars
+    {...labelsPositionNone}
+/>
+
+</div>