# How to Configure Plotly Visualization with Custom Themes in optionstratlib

> Learn to configure Plotly visualization with custom themes in optionstratlib using hex color strings in GraphConfig for automatic application during rendering. Enhance your charts today.

- Repository: [Joaquin Bejar Garcia/optionstratlib](https://github.com/joaquinbejar/optionstratlib)
- Tags: how-to-guide
- Published: 2026-03-04

---

**You configure Plotly visualization with custom themes in optionstratlib by setting the `color_scheme` field in `GraphConfig` to `ColorScheme::Custom` with a vector of hex color strings, which the `Graph` trait automatically applies when rendering.**

The `optionstratlib` crate provides a comprehensive visualization module that leverages Plotly for interactive financial charts. When you configure Plotly visualization with custom themes, you control the aesthetic layer through a type-safe enum system while maintaining full programmatic control over individual trace colors.

## Understanding the Theme Architecture

### ColorScheme Enum

The foundation of theme configuration resides in [`src/visualization/styles.rs`](https://github.com/joaquinbejar/optionstratlib/blob/main/src/visualization/styles.rs). The `ColorScheme` enum defines both built-in palettes and the custom variant:

- `Default` – Standard library palette
- `Viridis` – Perceptually uniform sequential colormap
- `Plasma` – High-contrast sequential palette
- `White` – Monochromatic white theme
- `HighContrast` – Accessibility-optimized colors
- `Custom(Vec<String>)` – User-defined hex, rgb, or CSS color names

### GraphConfig Struct

Located in [`src/visualization/config.rs`](https://github.com/joaquinbejar/optionstratlib/blob/main/src/visualization/config.rs), `GraphConfig` serves as the central configuration container. The `color_scheme` field accepts any `ColorScheme` variant, while additional fields control line styles, dimensions, axis labels, and legend visibility.

## Implementing Custom Color Themes

To apply a custom palette, instantiate `ColorScheme::Custom` with your color vector when building the `GraphConfig`:

```rust
use optionstratlib::visualization::{
    Graph, GraphConfig, GraphData, Series2D, ColorScheme, LineStyle, OutputType,
};
use std::path::Path;

struct MyCustomPlot;

impl Graph for MyCustomPlot {
    fn graph_data(&self) -> GraphData {
        let series = Series2D {
            x: vec![0.0, 1.0, 2.0, 3.0],
            y: vec![0.0, 2.0, 1.0, 3.0],
            ..Default::default()
        };
        GraphData::Series(series)
    }

    fn graph_config(&self) -> GraphConfig {
        let custom_colors = vec![
            "#1f77b4".into(), // muted blue
            "#ff7f0e".into(), // orange
            "#2ca02c".into(), // green
        ];

        GraphConfig {
            title: "Custom Themed Analysis".into(),
            width: 800,
            height: 600,
            color_scheme: ColorScheme::Custom(custom_colors),
            line_style: LineStyle::Dashed,
            ..Default::default()
        }
    }
}

fn main() -> Result<(), Box<dyn std::error::Error>> {
    let plot = MyCustomPlot;
    plot.render(OutputType::Html(Path::new("output.html").to_path_buf()))?;
    Ok(())
}

```

The `pick_color` function in [`src/visualization/utils.rs`](https://github.com/joaquinbejar/optionstratlib/blob/main/src/visualization/utils.rs) handles the color resolution. It cycles through the custom palette based on trace index, ensuring each series receives a distinct color from your defined set.

## Overriding Individual Trace Colors

You can override specific trace colors while maintaining the theme for others. Set the `line_color` field on individual `Series2D` instances:

```rust
impl Graph for MyPlot {
    fn graph_data(&self) -> GraphData {
        let mut s1 = Series2D {
            x: vec![0.0, 1.0, 2.0],
            y: vec![0.0, 1.0, 0.5],
            ..Default::default()
        };
        s1.line_color = Some("#d62728".into()); // Force red for this trace

        let s2 = Series2D {
            x: vec![0.0, 1.0, 2.0],
            y: vec![1.0, 0.5, 1.5],
            ..Default::default()
        };

        GraphData::MultiSeries(vec![s1, s2])
    }

    fn graph_config(&self) -> GraphConfig {
        GraphConfig {
            color_scheme: ColorScheme::Viridis, // s2 uses Viridis palette
            ..Default::default()
        }
    }
}

```

The `to_plot` method in [`src/visualization/plotly.rs`](https://github.com/joaquinbejar/optionstratlib/blob/main/src/visualization/plotly.rs) checks for explicit colors before consulting the `ColorScheme`, allowing this mixed approach.

## Built-in Theme Options for Accessibility

For accessibility requirements, use the `HighContrast` variant:

```rust
let cfg = GraphConfig {
    color_scheme: ColorScheme::HighContrast,
    ..Default::default()
};

```

This palette selects colors optimized for screen readers and low-vision displays, as implemented in the color resolution logic within [`src/visualization/utils.rs`](https://github.com/joaquinbejar/optionstratlib/blob/main/src/visualization/utils.rs).

## Summary

- **Theme configuration** centers on the `ColorScheme` enum in [`src/visualization/styles.rs`](https://github.com/joaquinbejar/optionstratlib/blob/main/src/visualization/styles.rs), supporting both built-in palettes and custom color vectors.
- **GraphConfig** in [`src/visualization/config.rs`](https://github.com/joaquinbejar/optionstratlib/blob/main/src/visualization/config.rs) binds themes to specific plots through the `color_scheme` field.
- **Color resolution** occurs in [`src/visualization/utils.rs`](https://github.com/joaquinbejar/optionstratlib/blob/main/src/visualization/utils.rs) via `pick_color`, which cycles through palette indices for each trace.
- **Trace-level overrides** take precedence over themes when `line_color` is explicitly set on `Series2D` instances.
- **Accessibility** is supported through the `HighContrast` theme variant.

## Frequently Asked Questions

### How do I define a custom color palette with specific hex codes?

Create a `Vec<String>` containing your hex codes, rgb values, or CSS color names, then pass it to `ColorScheme::Custom` when constructing your `GraphConfig`. The `pick_color` function in [`src/visualization/utils.rs`](https://github.com/joaquinbejar/optionstratlib/blob/main/src/visualization/utils.rs) automatically cycles through these colors for each trace in your plot.

### Can I use different themes for different traces in the same plot?

While you cannot assign different `ColorScheme` variants to individual traces directly, you can achieve mixed styling by setting explicit `line_color` values on specific `Series2D` instances while allowing other traces to inherit colors from the global `ColorScheme` defined in `GraphConfig`.

### What built-in themes are available besides custom palettes?

The `ColorScheme` enum in [`src/visualization/styles.rs`](https://github.com/joaquinbejar/optionstratlib/blob/main/src/visualization/styles.rs) provides `Default`, `Viridis`, `Plasma`, `White`, and `HighContrast`. The `HighContrast` option is specifically designed for accessibility, using colors that remain distinguishable for users with low vision or color blindness.

### Where is the theme actually applied to the Plotly traces?

Theme application occurs in [`src/visualization/plotly.rs`](https://github.com/joaquinbejar/optionstratlib/blob/main/src/visualization/plotly.rs) within the `to_plot` method implementation of the `Graph` trait. This method iterates through traces and calls `pick_color` from [`src/visualization/utils.rs`](https://github.com/joaquinbejar/optionstratlib/blob/main/src/visualization/utils.rs) for any trace lacking an explicit color, thereby applying the `ColorScheme` defined in the configuration.