Implementation:Evidentlyai Evidently Legacy HTML Widgets

Knowledge Sources	Evidentlyai_Evidently
Domains	ML Monitoring, Visualization
Last Updated	2026-02-14 12:00 GMT

Overview

Provides the HTML widget rendering system for the legacy Evidently pipeline, offering factory functions and helper classes to generate BaseWidgetInfo objects for Plotly graphs, counters, tables, tabs, heatmaps, histograms, and specialized ML plots (ROC, PR, lift, class separation).

Description

This module serves as the primary widget-building toolkit for Evidently's legacy HTML report renderer. Every function returns a BaseWidgetInfo object that the report dashboard system can serialize and display in the browser. The module is organized into general-purpose widgets and ML-specific plot generators.

Enums and data classes:

WidgetSize -- Enum with values SMALL (0), HALF (1), and FULL (2), controlling widget display width.
GraphData -- Wraps a title with Plotly data and layout dictionaries. Includes a figure() static method to construct from a Plotly Figure object.
CounterData -- Represents a single counter with a label and value. Has factory methods: float(), string(), int().
ColumnType (local enum) -- Widget column types: STRING, LINE, SCATTER, HISTOGRAM.
SortDirection -- ASC or DESC for table column sorting.
ColumnDefinition -- Defines a rich table column: title, field_name, type, sort direction, and options.
TabData -- Pairs a title with a BaseWidgetInfo for tabbed widgets.
HeatmapData -- Name and correlation matrix for heatmap rendering.
DetailsPartInfo / RowDetails / RichTableDataRow -- Support expandable row details in rich tables.

General-purpose widget functions:

plotly_graph -- Renders a GraphData object as a big graph widget.
plotly_data -- Shortcut to create a graph widget from raw Plotly data and layout dicts.
plotly_figure -- Creates a widget from a Plotly Figure object.
plotly_graph_tabs -- Creates a tabbed widget with multiple graphs.
counter -- Renders a list of CounterData values.
pie_chart -- Renders a Plotly pie chart with optional custom colors.
header_text -- Renders a text header widget.
text_widget -- Renders a markdown text widget.
table_data -- Renders a simple table from column names and data rows.
widget_tabs -- Renders a tabbed container of arbitrary widgets.
widget_tabs_for_more_than_one -- Conditionally wraps in tabs only if more than one tab is present.
rich_table_data -- Renders a feature-rich table with column types (histograms, sparklines), pagination, and expandable row details.
histogram -- Renders one or two overlapping histograms with configurable axes and colors.
get_histogram_figure -- Returns a Plotly Figure for histogram data without wrapping in a widget.
get_histogram_for_distribution -- Converts Distribution objects into a histogram widget.
get_heatmaps_widget -- Renders one or two heatmaps (e.g., correlation matrices) side by side.
group_widget -- Groups multiple widgets under a single title.
rich_data -- Renders a rich data widget with header, description, metrics, and graph.

ML-specific plot functions:

get_roc_auc_tab_data -- Generates per-label ROC curve tabs comparing current and optional reference data.
get_pr_rec_plot_data -- Generates per-label Precision-Recall curve tabs.
get_lift_plot_data -- Generates per-label Lift curve tabs.
get_class_separation_plot_data -- Generates per-label class separation scatter plots (raw data).
get_class_separation_plot_data_agg -- Generates per-label class separation box plots (aggregated data).
class_separation_traces_raw / class_separation_traces_agg -- Helper functions producing Plotly traces for class separation plots.

Usage

Used by metric renderers to convert MetricResult objects into visual HTML widgets. Import individual widget functions when implementing custom metric renderers for the legacy pipeline.

Code Reference

Source Location

Repository: Evidentlyai_Evidently
File: src/evidently/legacy/renderers/html_widgets.py

Signature

class WidgetSize(int, Enum):
    SMALL = 0; HALF = 1; FULL = 2

class GraphData:
    def __init__(self, title: str, data: dict, layout: dict): ...
    @staticmethod
    def figure(title: str, figure: go.Figure) -> "GraphData": ...

class CounterData:
    def __init__(self, label: str, value: str): ...
    @staticmethod
    def float(label: str, value: float, precision: int) -> "CounterData": ...
    @staticmethod
    def int(label: str, value: int) -> "CounterData": ...

def plotly_graph(*, graph_data: GraphData, size: WidgetSize = WidgetSize.FULL) -> BaseWidgetInfo: ...
def plotly_data(*, title: str, data: dict, layout: dict, size: WidgetSize = ...) -> BaseWidgetInfo: ...
def plotly_figure(*, title: str, figure: go.Figure, size: WidgetSize = ...) -> BaseWidgetInfo: ...
def plotly_graph_tabs(*, title: str, figures: List[GraphData], size: WidgetSize = ...) -> BaseWidgetInfo: ...
def counter(*, counters: List[CounterData], title: str = "", size: WidgetSize = ...) -> BaseWidgetInfo: ...
def pie_chart(*, title: str, data: ..., size: WidgetSize = ..., colors: ... = None) -> BaseWidgetInfo: ...
def header_text(*, label: str, title: str = "", size: WidgetSize = ...) -> BaseWidgetInfo: ...
def text_widget(*, text: str, title: str = "", size: WidgetSize = ...) -> BaseWidgetInfo: ...
def table_data(*, column_names: Iterable[str], data: Iterable[Iterable], ...) -> BaseWidgetInfo: ...
def widget_tabs(*, title: str = "", size: WidgetSize = ..., tabs: List[TabData]) -> BaseWidgetInfo: ...
def rich_table_data(*, title: str = "", ..., columns: List[ColumnDefinition], data: List[RichTableDataRow]) -> BaseWidgetInfo: ...
def histogram(*, title: str, primary_hist: HistogramData, ..., color_options: ColorOptions, ...) -> BaseWidgetInfo: ...
def get_heatmaps_widget(*, title: str = "", primary_data: HeatmapData, ...) -> BaseWidgetInfo: ...
def get_roc_auc_tab_data(curr_roc_curve: ROCCurve, ...) -> List[Tuple[str, BaseWidgetInfo]]: ...
def get_pr_rec_plot_data(current_pr_curve: PRCurve, ...) -> List[Tuple[str, BaseWidgetInfo]]: ...
def get_lift_plot_data(current_lift_curve: LiftCurve, ...) -> List[Tuple[str, BaseWidgetInfo]]: ...

Import

from evidently.legacy.renderers.html_widgets import (
    WidgetSize,
    GraphData,
    CounterData,
    plotly_graph,
    plotly_data,
    plotly_figure,
    plotly_graph_tabs,
    counter,
    pie_chart,
    header_text,
    text_widget,
    table_data,
    widget_tabs,
    TabData,
    rich_table_data,
    ColumnDefinition,
    ColumnType,
    SortDirection,
    RichTableDataRow,
    RowDetails,
    histogram,
    get_histogram_for_distribution,
    get_heatmaps_widget,
    HeatmapData,
    get_roc_auc_tab_data,
    get_pr_rec_plot_data,
    get_lift_plot_data,
    get_class_separation_plot_data,
    group_widget,
    rich_data,
)

I/O Contract

Inputs

Name	Type	Required	Description
graph_data	`GraphData`	Yes (for plotly_graph)	Plotly data and layout wrapped in a GraphData object.
figure	`go.Figure`	Yes (for plotly_figure)	A Plotly Figure object to render.
counters	`List[CounterData]`	Yes (for counter)	List of counter label-value pairs.
primary_hist	`HistogramData`	Yes (for histogram)	Primary histogram data to display.
secondary_hist	`Optional[HistogramData]`	No	Optional overlay histogram for comparison.
color_options	`ColorOptions`	Yes (for most plot functions)	Color scheme for current/reference data.
primary_data	`HeatmapData`	Yes (for get_heatmaps_widget)	Correlation matrix to render as heatmap.
columns	`List[ColumnDefinition]`	Yes (for rich_table_data)	Column definitions for rich table.
data	`List[RichTableDataRow]`	Yes (for rich_table_data)	Row data for rich table.
size	`WidgetSize`	No	Widget display size (default FULL).
title	`str`	No	Widget title (default empty string for most).

Outputs

Name	Type	Description
widget	`BaseWidgetInfo`	Serializable widget info object for HTML dashboard rendering.
plot_data	`List[Tuple[str, BaseWidgetInfo]]`	For ROC/PR/lift functions: list of (label, widget) pairs for tabbed display.
figure	`go.Figure`	For get_histogram_figure: raw Plotly figure for further customization.

Usage Examples

import pandas as pd
import plotly.graph_objs as go
from evidently.legacy.renderers.html_widgets import (
    plotly_figure,
    counter,
    CounterData,
    histogram,
    WidgetSize,
    table_data,
)
from evidently.legacy.metric_results import HistogramData
from evidently.legacy.options import ColorOptions

# Create a simple plotly figure widget
fig = go.Figure(go.Bar(x=["A", "B", "C"], y=[10, 20, 15]))
widget = plotly_figure(title="Category Distribution", figure=fig, size=WidgetSize.FULL)

# Create a counter widget
counters_widget = counter(
    title="Key Metrics",
    counters=[
        CounterData.float("Accuracy", 0.95, 3),
        CounterData.int("Samples", 1000),
        CounterData.string("Status", "Passed"),
    ],
)

# Create a histogram widget
color_opts = ColorOptions()
hist_data = HistogramData(name="current", x=pd.Series(["a", "b", "c"]), count=pd.Series([10, 20, 15]))
ref_data = HistogramData(name="reference", x=pd.Series(["a", "b", "c"]), count=pd.Series([12, 18, 16]))
hist_widget = histogram(
    title="Feature Distribution",
    primary_hist=hist_data,
    secondary_hist=ref_data,
    color_options=color_opts,
)

# Create a simple table
tbl = table_data(
    title="Summary",
    column_names=["Feature", "Drift Score", "Drifted"],
    data=[["age", "0.03", "No"], ["income", "0.45", "Yes"]],
)

Related Pages

Environment:Evidentlyai_Evidently_Python_Core_Environment
Evidentlyai_Evidently_Legacy_Base_Metric -- Metrics whose results are rendered by these widgets
Evidentlyai_Evidently_Legacy_Metric_Results -- Data models consumed by widget functions (Distribution, HistogramData, etc.)
Evidentlyai_Evidently_Legacy_Report -- Report class that orchestrates widget rendering

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment