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

# Dashboard Widgets

> Customize dashboards with widgets

export const AskAlyx = ({children}) => {
  const gradientId = `askAlyxGradient-${Math.random().toString(36).slice(2)}`;
  return <div style={{
    display: "flex",
    alignItems: "flex-start",
    gap: "0.625rem",
    margin: "1rem 0",
    padding: "0.75rem 1rem",
    borderRadius: "10px",
    border: "1px solid rgba(120, 115, 245, 0.25)",
    background: "linear-gradient(135deg, rgba(255, 110, 196, 0.08), rgba(120, 115, 245, 0.08))"
  }}>
      <svg width="18" height="18" viewBox="0 0 21 17" xmlns="http://www.w3.org/2000/svg" style={{
    flexShrink: 0,
    marginTop: "0.2rem"
  }}>
        <defs>
          <linearGradient id={gradientId} x1="0%" y1="100%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#FF3CA8" />
            <stop offset="100%" stopColor="#4827C1" />
          </linearGradient>
        </defs>
        <path d="M6.28906 12.7223C6.28889 11.3831 5.24007 10.3385 3.98926 10.3385C2.73859 10.3387 1.68963 11.3832 1.68945 12.7223C1.68945 14.0616 2.73849 15.1059 3.98926 15.1061C5.24018 15.1061 6.28906 14.0617 6.28906 12.7223ZM7.81152 0.557254C9.70554 -0.563135 12.1081 0.0645388 13.2607 1.91468L13.3691 2.09827V2.09925L20.7266 15.402C20.8713 15.6637 20.8667 15.9823 20.7148 16.2399C20.5629 16.4975 20.2864 16.6559 19.9873 16.6559H14.5459C13.0953 16.6474 11.7648 15.848 11.0469 14.5748V14.5739L6.33301 6.19104C5.22656 4.2273 5.87813 1.706 7.80957 0.558231L7.81152 0.557254ZM11.8906 2.91761C11.2374 1.74047 9.78961 1.34962 8.67188 2.01038L8.67285 2.01136C7.61521 2.64 7.19477 3.99924 7.69336 5.13733L7.80566 5.36194V5.36292L12.5186 13.7448C12.9466 14.5038 13.7274 14.9616 14.5557 14.9664H18.5547L11.8906 2.91663V2.91761ZM7.97949 12.7223C7.97949 14.9527 6.21527 16.7965 3.98926 16.7965C1.7634 16.7963 0 14.9526 0 12.7223C0.000173728 10.4921 1.76351 8.64923 3.98926 8.64905C6.21516 8.64905 7.97932 10.492 7.97949 12.7223Z" fill={`url(#${gradientId})`} />
      </svg>
      <span>{children}</span>
    </div>;
};

# Widget **Overview**

Dashboard widgets are the individual tiles that help create a dashboard view. Widgets provide an easy way to customize dashboards and perform ad hoc analysis. They can be used to build dashboards from scratch, or as a way to modify [templated dashboards.](./#token-tracking-and-latency-template)

# **Widget Types**

## **Experiments**

Tracking experiments over time in your dashboard lets you visualize the progress and results of specific evaluations and see how different experiment versions compare.

<Frame>
  ![Experiments Widget](https://storage.googleapis.com/arize-phoenix-assets/assets/images/arize-docs-images/dashboard-widgets-1.gif)
</Frame>

1. **Start a Dashboard**\
   Begin with an existing dashboard, a blank one, or use a created template.
2. **Enter Edit Mode**\
   Switch to edit mode to enable adding and configuring widgets.
3. **Add the Experiments Widget**\
   Select or drag the 'Experiments' widget into the dashboard to start configuring your experiment tracking.
4. **Select a Dataset**\
   Choose the dataset associated with your experiments that you want to visualize.
5. **Choose Evaluations to Track**\
   Specify the particular evaluation metrics you want to monitor over time. This can include key metrics you’re using to measure experiment success.
6. **Interactive Experiment Details**\
   To view more details for any experiment in the widget, hover over the desired experiment and click to access in-depth insights about that experiment’s metrics, configurations, and results.

## **Time Series**

Use time series widgets to view metrics over time, helping you track trends and monitor performance. Common metrics to visualize in a time series include token count, number of sessions, errors, and costs, among others.

<AskAlyx>**Ask Alyx** to add the time series widget for you -- try *"Track p95 latency for LLM spans over the last 7 days."*</AskAlyx>

<Frame>
  ![Time Series Widget](https://storage.googleapis.com/arize-phoenix-assets/assets/images/arize-docs-images/dashboard-widgets-2.gif)
</Frame>

1. **Start a Dashboard**\
   Begin with an existing dashboard, create a new blank dashboard, or use a pre-built template.
2. **Enter Edit Mode**\
   Switch to edit mode to add widgets and configure their settings.
3. **Add the Time Series Widget**\
   Select or drag the 'Time Series' widget into your dashboard.
4. **Define the Plot**\
   Choose the metric you want to track. For example, you could monitor `attributes.llm.token_count.total` to track costs, or select a custom metric you’ve defined.\
   Time series plots are ideal for visualizing data trends over time, making it easy to spot patterns or changes in metrics.

**Track Evaluations**\
You can also use time series widgets to track evaluation metrics. For example, you might track label counts over time or create custom evaluation metrics to gain insights into model performance as it evolves.

## **Distribution**

A distribution widget helps analyze the spread and concentration of data within your dashboard, useful for understanding the distribution of dimensions or evaluations.

<Frame>
  ![Distribution Widget](https://storage.googleapis.com/arize-phoenix-assets/assets/images/arize-docs-images/dashboard-widgets-3.gif)
</Frame>

1. **Begin with a Dashboard**\
   Start with an existing dashboard, a new blank one, or a created template.
2. **Enter Edit Mode**\
   Enter edit mode to start creating and configuring widgets.
3. **Add the Distribution Widget**\
   Select or drag the 'Distribution' widget creation button into your dashboard.
4. **Define the Plot**\
   Choose the model you want to analyze and select the distribution type, such as span property or evaluation. Then, select the specific dimension to visualize.
5. **Adjust Display Options**

   * For **numeric dimensions**, you can customize the view by choosing a binning strategy (e.g., equal-width bins or custom intervals).
   * For **categorical dimensions**, slices will automatically display for each unique value, making it easy to see the proportion of each category.

   If you select a feature with a string data type, values will be bucketed by the unique values rather than numeric ranges. This flexibility allows you to analyze both numerical and categorical data effectively.

## **Statistic**

Highlight essential performance metrics in a snapshot view, perfect for monitoring key metrics across environments.

<Frame>
  ![Statistic Widget](https://storage.googleapis.com/arize-phoenix-assets/assets/images/arize-docs-images/dashboard-widgets-4.gif)
</Frame>

1. **Start with a Dashboard**\
   Use an existing dashboard, create a blank one, or start with a created template.
2. **Enter Edit Mode**\
   Switch to edit mode to add and configure widgets.
3. **Add the Statistic Widget**\
   Select or drag the 'Statistic' widget square into the dashboard.
4. **Define the Metric**\
   Specify the evaluation or performance metric to display. Define the rest of the widget by choosing the model, metric, model environment (e.g., Production, Pre-production), and version (if applicable).
5. **Add Filters for Specific Insights**\
   Narrow down the metric by adding filters based on features, actuals, predictions, or other dataset attributes to ensure you're viewing the most relevant data.

## **Text**

Use the text widget to add annotations or metadata directly to your dashboard, providing context and enhancing readability.

<Frame>
  ![Text Widget](https://storage.googleapis.com/arize-phoenix-assets/assets/images/arize-docs-images/dashboard-widgets-5.gif)
</Frame>

1. **Start a Dashboard**\
   Choose an existing dashboard, a blank one, or a pre-made template.
2. **Enter Edit Mode**\
   Go to edit mode to configure widgets and add information.
3. **Add the Text Widget**\
   Select or drag the 'Text' widget square into the dashboard.
4. **Type Annotations**\
   Add notes, explanations, and any other relevant information that helps provide context or interpret the data within the dashboard.

## **Scatter Plot**

Use the scatter plot widget to visualize how different attributes are correlated in your project.

1. **Start a Dashboard**\
   Use an existing dashboard, a blank one, or start with a template.
2. **Add the Scatter Plot Widget**\
   Add the Scatter Plot widget to the dashboard using the “Add widget” button in the top right.
3. **Define the Plot**\
   Choose the project you want to analyze, and then select dimensions for the x and y axis, such as span properties.

## **Pivot Table**

Use a pivot table widget to compare and analyze attributes across a category in a project.

1. **Start a Dashboard**\
   Use an existing dashboard, a blank one, or start with a template.
2. **Add the Pivot Table Widget**\
   Add the Pivot Table widget to the dashboard using the “Add widget” button in the top right.
3. **Define the Plot**\
   Choose the project you want to analyze and select a dimension for the row which will group the data by a category. Then, select what to display in the columns using the values fields. For example, see how token usage varies across models in the project by using model name as the row, and adding token count as the value.

Enjoy building insightful, tailored dashboards with these widget options to meet your analysis and monitoring needs!
