mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
10e34e4723
## Summary For ES|QL charts the formula api should be redundant. This is going to make the api lighter as there is no need to import the lens plugin if you want to use the builder to create ES|QL charts.
59 lines
1.8 KiB
Text
59 lines
1.8 KiB
Text
---
|
|
id: kibDevLensConfigAPITreeMap
|
|
slug: /kibana-dev-docs/lens/config-builder/treemap
|
|
title: Lens Config Builder API - TreeMap
|
|
description: Lens Config Builder API - TreeMap
|
|
date: 2024-03-04
|
|
tags: ['kibana', 'dev', 'lens', 'treemap']
|
|
---
|
|
|
|
import Dataset from './dataset.mdx';
|
|
import Breakdown from './breakdown.mdx';
|
|
|
|
Understanding `LensTreeMapConfig` in detail
|
|
|
|
## Required Properties
|
|
|
|
### `chartType`
|
|
|
|
- **Type:** Fixed value `'treemap'`
|
|
- **Description:** Sets the chart type to treemap. Treemaps are used to visualize hierarchical data using nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's size and color can vary to show statistical information about the node and its relationship to the rest of the tree.
|
|
|
|
### `title`
|
|
|
|
- **Type:** `string`
|
|
- **Description:** The title of the visualization.
|
|
|
|
<Dataset />
|
|
|
|
### `breakdown`
|
|
|
|
- **Type:** `LensBreakdownConfig[]`
|
|
- **Description:** An array of breakdown configurations to hierarchically segment the data into nested rectangles. The breakdowns determine how the data is grouped and subdivided, with each level of the hierarchy represented by a deeper level of nesting in the treemap. Check breakdown configuration details below.
|
|
|
|
<Breakdown />
|
|
|
|
## Optional Properties
|
|
|
|
## Example
|
|
|
|
```
|
|
const treemapConfig: LensConfig = {
|
|
chartType: 'treemap',
|
|
title: 'Treemap chart',
|
|
dataset: {
|
|
esql: 'from kibana_sample_data_logs | stats bytes = sum(bytes) by geo.src, geo.dest',
|
|
},
|
|
breakdown: [
|
|
'geo.src',
|
|
'geo.dest',
|
|
],
|
|
value: 'bytes',
|
|
};
|
|
const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
|
|
const lensConfig = configBuilder.build(treemapConfig, {
|
|
timeRange: { from: 'now-1y', to: 'now', type: 'relative' },
|
|
embeddable: true,
|
|
});
|
|
```
|
|
|