# BogCharts for Token Teams
If you have not yet done so, you can create a chart embed [**here**](https://teams.bogged.finance/chart).\
\
There are two types of chart embeds: [**iframe**](#iframe) and [**Web Component**](#web-component)
## iframe
Iframe code can be placed anywhere in your HTML code with no additional scripts.\
You can style the iframe with CSS just like any other HTML element.\
\
**Example:**
```html
```
## Web Component
A Web Component is a new web technology to create reusable custom elements with their functionality encapsulated away from the rest of your code.\
\
For the Chart Web Component, you can modify any property on the element to have it update in real-time. You can also listen to the **onUpdate** event to get price information as the chart updates.
#### **Exposed Price Information**
```typescript
{
"baseSymbol": string,
"baseAddress": string,
"baseDecimals": number,
"basePriceUSD": number,
"baseCircSupply": number,
"baseTotalSupply": number,
"baseMarketcap": number,
"baseMarketcapFD": number,
"quoteSymbol": string,
"quoteAddress": string,
"quoteDecimals": number,
"quotePriceUSD": number,
"tokensPerQuote": number,
"singleLPValueUSD": number,
"totalLiquidityUSD": number,
"pairAddress": string,
"pairFactory": string
}
```
### Examples
#### **Dynamically Changing Chart Type**
```html
```
{% embed url="" %}
**Changing Chart Type Example**
{% endembed %}
#### **Listening To Chart Update**
```html