mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -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.
67 lines
1.7 KiB
Text
67 lines
1.7 KiB
Text
---
|
|
id: kibDevLensConfigAPIPie
|
|
slug: /kibana-dev-docs/lens/config-builder/pie
|
|
title: Lens Config Builder API - Pie
|
|
description: Lens Config Builder API - Pie
|
|
date: 2024-03-04
|
|
tags: ['kibana', 'dev', 'lens', 'pie']
|
|
---
|
|
|
|
import Dataset from './dataset.mdx';
|
|
import Breakdown from './breakdown.mdx';
|
|
|
|
Understanding `LensPieConfig` in detail
|
|
|
|
## Required Properties
|
|
|
|
### `chartType`
|
|
|
|
- **Type:** Fixed values `'pie' | 'donut'`
|
|
- **Description:** Sets the chart type to either pie or donut.
|
|
|
|
### `title`
|
|
|
|
- **Type:** `string`
|
|
- **Description:** The title of the visualization.
|
|
|
|
<Dataset />
|
|
|
|
### `breakdown`
|
|
|
|
- **Type:** `LensBreakdownConfig[]`
|
|
- **Description:** An array of breakdown configurations to segment the data into slices. Each breakdown configures how data should be grouped and displayed in the pie or donut chart, enabling detailed and meaningful data representations. Check breakdown configuration details below.
|
|
|
|
## Optional Properties
|
|
|
|
### `legend`
|
|
|
|
- **Type:** `Identity<LensLegendConfig>`
|
|
- **Description:** Configures the chart's legend. It includes properties to show or hide the legend and to position it relative to the chart ('top', 'left', 'bottom', 'right'). This helps in identifying what each slice of the pie or donut chart represents.
|
|
|
|
|
|
<Breakdown />
|
|
|
|
## Example
|
|
|
|
```
|
|
const pieConfig: LensConfig = {
|
|
chartType: 'pie',
|
|
title: 'Bytes by Region',
|
|
dataset: {
|
|
esql: 'from sales_data | stats avgBytes = avg(bytes) by geo.src',
|
|
},
|
|
breakdown: [
|
|
'geo.src'
|
|
],
|
|
legend: {
|
|
show: true,
|
|
position: 'right',
|
|
},
|
|
};
|
|
const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
|
|
const lensConfig = configBuilder.build(pieConfig, {
|
|
timeRange: { from: 'now-1y', to: 'now', type: 'relative' },
|
|
embeddable: true,
|
|
});
|
|
```
|
|
|