> ## Documentation Index
> Fetch the complete documentation index at: https://zero-true.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Plotly

<Card title="Example Usage" icon="code">
  ```python theme={null}
  import zero_true as zt
  import matplotlib.pyplot as plt
  import plotly.graph_objects as go
  import plotly
  import io
  import base64
  import json
  import pandas as pd
  import warnings

  # Use Agg backend for Matplotlib to avoid GUI issues
  plt.switch_backend('Agg')

  # Initialize state
  zt_state = zt.state()

  # Sample data for demonstration
  data = {
    'Category': ['A', 'B', 'C', 'D'],
    'Values': [23, 17, 35, 29]
  }

  df = pd.DataFrame(data)

  # Function to create Plotly component
  def create_plotly_component():
    # Create a sample Plotly figure
    plotly_fig = go.Figure(data=go.Bar(x=df['Category'], y=df['Values']))
    plotly_fig.update_layout(title="Sample Plotly Bar Chart", xaxis_title="Category", yaxis_title="Values")

    # Serialize the Plotly figure to JSON
    plotly_json = json.dumps(plotly_fig, cls=plotly.utils.PlotlyJSONEncoder)

    # Create a PlotlyComponent
    sample_plotly = zt.PlotlyComponent(
        id="sample_plotly",
        figure_json=plotly_json  # Serialized Plotly figure as JSON string
    )

    return sample_plotly

  # Create component
  plotly_component = create_plotly_component()

  layout = plotly_component.id


  # Render the layout
  def render_layout():
    # Assuming you have a mechanism to render or use this
    pass

  render_layout()
  ```
</Card>

<Card title="Example Output" icon="computer">
  <iframe src="https://published.zero-true.com/srrey/exampleplotly/" width="100%" height="300" />
</Card>

## Overview

`pydantic model zero_true.Plotly`

The PlotlyComponent is designed to incorporate interactive Plotly graphs within web interfaces, ideal for data visualization tasks that require interactivity and detailed graphical displays. This component accepts serialized Plotly figures, allowing for dynamic and responsive data visualization solutions.

<Note> The uniqueness of each component is ensured by a validation process for component IDs, making it suitable for applications that involve multiple interactive elements. This integration capability makes it a valuable tool for scientific research, data analysis, and interactive reporting.</Note>

## JSON Schema

<Accordion title="Field Defenitions">
  ```json theme={null}
  {
     "title": "PlotlyComponent",
     "description": "Component to display a Plotly figure",
     "type": "object",
     "properties": {
        "id": {
           "description": "ID for the component",
           "title": "Id",
           "type": "string"
        },
        "variable_name": {
           "default": "",
           "description": "Optional variable name associated with a component",
           "title": "Variable Name",
           "type": "string"
        },
        "component": {
           "default": "plotly-plot",
           "description": "Vue component name for Plotly",
           "title": "Component",
           "type": "string"
        },
        "figure_json": {
           "description": "Serialized Plotly figure as JSON string",
           "title": "Figure Json",
           "type": "string"
        }
     },
     "required": [
        "id",
        "figure_json"
     ]
  }
  ```
</Accordion>

<Info>Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.</Info>

<ResponseField name="zero_true.Plotly" type="Zero True Component">
  <Expandable title="properties">
    <AccordionGroup>
      <Accordion title="field component">
        **field component:** str = 'plotly-plot';
        Vue component name for Plotly.
      </Accordion>

      <Accordion title="field figure_json">
        **field figure\_json:** str \[Required];
        Serialized Plotly figure as JSON string.
      </Accordion>

      <Accordion title="field id">
        **field id:** str \[Required];
        ID for the component.
      </Accordion>
    </AccordionGroup>
  </Expandable>
</ResponseField>

<Card title="Methods">
  from\_figure: (figure: Figure, id: str);
  Creates a PlotlyComponent instance from a Plotly figure.
</Card>

<Card title="to_json">
  to\_json: Converts the component to a JSON-serializable dictionary.
</Card>