# Pie Charts
A pie plot is a proportional representation of the numerical data in a column
## Examples
### Pie Chart from Columns in a DataFrame
{% tabs %}
{% tab title="React" %}
```tsx
import { useEffect } from 'react';
import './App.css';
import { DataFrame } from "danfojs-nightly";
function App() {
useEffect(() => {
const df = new DataFrame({
Price: [19, 26, 55],
Location: ["NG", "GH", "SA"],
Type: ["Residential", "Non-Residential", "Utility"],
});
df.plot("plot_div").pie({ config: { values: "Price", labels: "Type" } });
}, [])
return (
);
}
export default App;
```
{% endtab %}
{% tab title="Browser" %}
```html
Document
e
```
{% endtab %}
{% endtabs %}
### Multiple Pie Chart from Columns in a DataFrame
```markup
Document
```
### Configure Position of Pie Charts
If you have more than one pie chart to display, you can set the grid parameter, and also the position of each pie.
For example, in the snippet below, we set the `grid` to 2 by 2 and also pass a set of row and column index positions. Each row/column position index corresponds to each pie.
```markup
Document
```
{% hint style="info" %}
For more configuration options for Pie Charts, see the [Plotly](https://plotly.com/javascript/pie-charts/) style doc.
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://danfo.jsdata.org/api-reference/plotting/pie-charts.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.