### Apply Theme to Chart

Source: https://github.com/yuankunzhang/charming/blob/main/README.md

Demonstrates how to apply a predefined theme, such as 'Westeros', to a chart using the `theme` method of the renderer. This example also shows how to set a title for the chart and save it as an SVG file. Requires the 'ssr' feature for ImageRenderer.

```rust
use charming::{Chart, ImageRenderer};
use charming::theme::Theme;
use charming::component::Title;

ImageRenderer::new(1000, 800).theme(Theme::Westeros).save(
    &Chart::new().title(Title::new().text("Westeros")),
    "/tmp/westeros.svg",
);

```

--------------------------------

### Render Chart to HTML in Rust

Source: https://context7.com/yuankunzhang/charming/llms.txt

This example generates a standalone HTML file containing an interactive chart. It uses the HtmlRenderer to embed the chart's JavaScript and configuration.

```rust
use charming::{HtmlRenderer, Chart, component::Axis, series::Bar};

fn main() -> Result<(), Box<dyn std::error::Error>> {
    let chart = Chart::new()
        .x_axis(Axis::new().data(vec!["A", "B", "C", "D", "E"]))
        .y_axis(Axis::new())
        .series(Bar::new().data(vec![10, 20, 30, 40, 50]));

    let renderer = HtmlRenderer::new("Sales Chart", 1000, 800);
    renderer.save(&chart, "/tmp/chart.html")?;

    println!("Chart saved to /tmp/chart.html");
    Ok(())
}
```

--------------------------------

### Charming Renderers: HTML, Image, and WASM

Source: https://github.com/yuankunzhang/charming/blob/main/README.md

Provides examples for using the three available renderers in the Charming library: HtmlRenderer for client-side web rendering, ImageRenderer for generating image files (requires 'ssr' feature), and WasmRenderer for WebAssembly environments (requires 'wasm' feature). Note that 'ssr' and 'wasm' are mutually exclusive.

```rust
// Use HtmlRenderer.
use charming::HtmlRenderer;

// Chart dimension 1000x800.
let renderer = HtmlRenderer::new("my charts", 1000, 800);
// Render the chart as HTML string.
let html_str = renderer.render(&chart).unwrap();
// Save the chart as HTML file.
renderer.save(&chart, "/tmp/chart.html").unwrap();


// Use ImageRenderer. The `ssr` feature needs to be enabled.
use charming::{ImageRenderer, ImageFormat};

// Chart dimension 1000x800.
let mut renderer = ImageRenderer::new(1000, 800);
// Render the chart as SVG string.
renderer.render(&chart).unwrap();
// Render the chart as PNG bytes.
renderer.render_format(ImageFormat::Png, &chart).unwrap();
// Save the chart as SVG file.
renderer.save(&chart, "/tmp/chart.svg").unwrap();
// Save the chart as PNG file.
renderer.save_format(ImageFormat::Png, &chart, "/tmp/chart.png");


// Use WasmRenderer. The `wasm` feature needs to be enabled.
use charming::WasmRenderer;

// Chart dimension 1000x800.
let renderer = WasmRenderer::new(1000, 800);
// Render the chart in the WebAssembly runtime
renderer.render("my-chart-id", &chart).unwrap();

```

--------------------------------

### Apply Custom Themes to Charts

Source: https://context7.com/yuankunzhang/charming/llms.txt

Demonstrates how to apply built-in themes to style charts using the Charming library. This example shows rendering a chart with the 'Westeros' theme and mentions other available themes. The output is saved as an SVG file.

```rust
use charming::{Chart, ImageRenderer, theme::Theme, component::Title};

fn main() {
    let chart = Chart::new()
        .title(Title::new().text("Themed Chart"));

    // Render with Westeros theme
    ImageRenderer::new(1000, 800)
        .theme(Theme::Westeros)
        .save(&chart, "/tmp/westeros.svg")
        .unwrap();

    // Other available themes: Dark, Vintage, Chalk, Halloween,
    // Wonderland, Walden, Infographic, Macarons, Roma, Shine, PurplePassion
}
```

--------------------------------

### Configure Chart with Multiple Series using Charming (Rust)

Source: https://context7.com/yuankunzhang/charming/llms.txt

Combines multiple data series (Bar and Line) into a single chart for comparison using the charming Rust library. This example generates a sales report and saves it as an HTML file, requiring the charming crate and its HTML rendering capabilities.

```rust
use charming::{
    Chart, component::{Axis, Legend, Title},
    element::AxisType, series::{Bar, Line}
};

fn main() {
    let chart = Chart::new()
        .title(Title::new().text("Sales Report"))
        .legend(Legend::new().data(vec!["Revenue", "Target"]))
        .x_axis(
            Axis::new()
                .type_(AxisType::Category)
                .data(vec!["Jan", "Feb", "Mar", "Apr", "May", "Jun"])
        )
        .y_axis(Axis::new().type_(AxisType::Value))
        .series(Bar::new().name("Revenue").data(vec![120, 200, 150, 80, 70, 110]))
        .series(Line::new().name("Target").data(vec![100, 180, 160, 90, 85, 120]));

    let renderer = HtmlRenderer::new("Sales Dashboard", 1200, 700);
    renderer.save(&chart, "/tmp/multi_series.html").unwrap();
}
```

--------------------------------

### Add Charming Dependency

Source: https://github.com/yuankunzhang/charming/blob/main/README.md

This command adds the charming crate as a dependency to your Rust project using Cargo. Ensure you have Rust and Cargo installed.

```sh
$
cargo add charming

```

--------------------------------

### Create and Render a Pie Chart to SVG

Source: https://github.com/yuankunzhang/charming/blob/main/README.md

Demonstrates creating a basic pie chart with specific configurations (legend, rose type, item styling) and rendering it into an SVG file using the ImageRenderer. Requires the 'ssr' feature to be enabled.

```rust
use charming::{
    component::Legend,
    element::ItemStyle,
    series::{Pie, PieRoseType},
    Chart,
    ImageRenderer
};

fn main() {
    let chart = Chart::new()
        .legend(Legend::new().top("bottom"))
        .series(
            Pie::new()
                .name("Nightingale Chart")
                .rose_type(PieRoseType::Radius)
                .radius(vec!["50", "150"])
                .center(vec!["50%", "50%"])
                .item_style(ItemStyle::new().border_radius(8))
                .data(vec![
                    (40.0, "rose 1"),
                    (38.0, "rose 2"),
                    (32.0, "rose 3"),
                    (30.0, "rose 4"),
                    (28.0, "rose 5"),
                    (26.0, "rose 6"),
                    (22.0, "rose 7"),
                    (18.0, "rose 8"),
                ]),
        );

    let mut renderer = ImageRenderer::new(1000, 800);
    renderer.save(&chart, "/tmp/nightingale.svg");
}

```

--------------------------------

### Create Line Chart with Tooltip in Rust

Source: https://context7.com/yuankunzhang/charming/llms.txt

This code creates a line chart and adds an interactive tooltip to display data values on hover. The tooltip's format is also customized.

```rust
use charming::{
    Chart, component::Axis, element::{AxisType, Tooltip}, series::Line
};

fn main() {
    let chart = Chart::new()
        .tooltip(Tooltip::new().formatter("Value: {c}"))
        .x_axis(
            Axis::new()
                .type_(AxisType::Category)
                .data(vec!["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"])
        )
        .y_axis(Axis::new().type_(AxisType::Value))
        .series(Line::new().data(vec![150, 230, 224, 218, 135, 147, 260]));

    // Chart JSON ready for rendering
}
```

--------------------------------

### Create Bar Chart in Rust

Source: https://context7.com/yuankunzhang/charming/llms.txt

This code demonstrates how to create a basic bar chart with categorical x-axis and value y-axis using the Charming library. It defines the chart's axes and data for each bar.

```rust
use charming::{Chart, component::Axis, element::AxisType, series::Bar};

fn main() {
    let chart = Chart::new()
        .x_axis(
            Axis::new()
                .type_(AxisType::Category)
                .data(vec!["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"])
        )
        .y_axis(Axis::new().type_(AxisType::Value))
        .series(Bar::new().data(vec![120, 200, 150, 80, 70, 110, 130]));

    println!("{}", chart); // Outputs JSON configuration
}
```

--------------------------------

### Create Gauge Chart with Charming (Rust)

Source: https://context7.com/yuankunzhang/charming/llms.txt

Generates a dashboard-style gauge chart to display single metrics like KPIs or progress. It uses the charming library in Rust and outputs an HTML file. Dependencies include the charming crate.

```rust
use charming::{
    Chart,
    element::Tooltip,
    series::{Gauge, GaugeDetail},
};

fn main() {
    let chart = Chart::new()
        .tooltip(Tooltip::new().formatter("{a} <br/>{b} : {c}%"))
        .series(
            Gauge::new()
                .name("Pressure")
                .detail(GaugeDetail::new().formatter("{value}"))
                .data(vec![(50, "Score")])
        );

    let renderer = HtmlRenderer::new("Performance Gauge", 800, 600);
    renderer.save(&chart, "/tmp/gauge.html").unwrap();
}
```

--------------------------------

### Integrate Charming Charts with Dioxus (Rust)

Source: https://context7.com/yuankunzhang/charming/llms.txt

Demonstrates embedding interactive charming charts into Dioxus applications for web or desktop. This Rust code snippet shows how to initialize and render an ECharts instance within a Dioxus component, requiring the charming and dioxus crates.

```rust
use charming::{
    component::Axis,
    element::{AxisType, Tooltip},
    series::Line,
    Chart,
};
use dioxus::prelude::*;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    let chart = Chart::new()
        .tooltip(Tooltip::new().formatter("Value: {c}"))
        .x_axis(
            Axis::new()
                .type_(AxisType::Category)
                .data(vec!["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"])
        )
        .y_axis(Axis::new().type_(AxisType::Value))
        .series(Line::new().data(vec![150, 230, 224, 218, 135, 147, 260]));

    let chart_json = chart.to_string();
    let mount_code = format!(
        r#"#,
            "            var chart = echarts.init(document.getElementById('chart'));
            chart.setOption({chart_json});
            window.addEventListener('resize', function() {{
                chart.resize();
            }});
        "#
    );

    rsx! {
        document::Script { src: asset!("/assets/echarts-5.5.1.min.js") }
        div { style: "text-align: center;",
            h1 { "Charming Dashboard" }
        }
        div {
            id: "chart",
            style: "width: 800px; height: 600px;",
            onmounted: move |_| {
                document::eval(&mount_code);
            }
        }
    }
}
```

--------------------------------

### Create Funnel Chart with Charming (Rust)

Source: https://context7.com/yuankunzhang/charming/llms.txt

Creates a funnel chart for conversion rate visualization with custom styling using the charming Rust library. The output is an SVG file. It requires the charming crate and customizes aspects like labels, item styles, and data sorting.

```rust
use charming::{
    Chart,
    component::{Legend, Title, Toolbox},
    df,
    element::{ItemStyle, Label, LabelPosition, Sort, Tooltip, Trigger},
    series::Funnel,
};

fn main() {
    let chart = Chart::new()
        .title(Title::new().text("Sales Funnel"))
        .tooltip(
            Tooltip::new()
                .trigger(Trigger::Item)
                .formatter("{a} <br/>{b} : {c}%")
        )
        .legend(Legend::new().data(vec!["Show", "Click", "Visit", "Inquiry", "Order"]))
        .series(
            Funnel::new()
                .name("Funnel")
                .left("10%")
                .top(60)
                .bottom(60)
                .width("80%")
                .min(0)
                .max(100)
                .sort(Sort::Descending)
                .gap(2)
                .label(Label::new().show(true).position(LabelPosition::Inside))
                .item_style(ItemStyle::new().border_color("#fff").border_width(1))
                .data(df![
                    (60, "Visit"),
                    (30, "Inquiry"),
                    (10, "Order"),
                    (80, "Click"),
                    (100, "Show"),
                ])
        );

    let mut renderer = ImageRenderer::new(1000, 800);
    renderer.save(&chart, "/tmp/funnel.svg").unwrap();
}
```

--------------------------------

### Render Chart to SVG Image in Rust

Source: https://context7.com/yuankunzhang/charming/llms.txt

This code demonstrates server-side rendering of a chart to an SVG image using the ImageRenderer. It requires the `ssr` feature and an embedded Deno runtime.

```rust
use charming::{ImageRenderer, Chart, component::Axis, series::Line};

fn main() {
    let chart = Chart::new()
        .x_axis(Axis::new().data(vec!["Q1", "Q2", "Q3", "Q4"]))
        .y_axis(Axis::new())
        .series(Line::new().data(vec![100, 150, 200, 250]));

    let mut renderer = ImageRenderer::new(1000, 800);
    renderer.save(&chart, "/tmp/chart.svg").unwrap();

    println!("Chart rendered to SVG");
}
```

--------------------------------

### Create Radar Chart for Multi-dimensional Data

Source: https://context7.com/yuankunzhang/charming/llms.txt

Constructs a radar chart for visualizing multi-dimensional data using the Charming library. It defines a radar coordinate system with indicators and series data representing 'Allocated Budget' and 'Actual Spending'. The output is saved as an SVG file.

```rust
use charming::{
    Chart,
    component::{Legend, RadarCoordinate, Title},
    series::Radar,
};

fn main() {
    let chart = Chart::new()
        .title(Title::new().text("Basic Radar Chart"))
        .legend(Legend::new().data(vec!["Allocated Budget", "Actual Spending"]))
        .radar(RadarCoordinate::new().indicator(vec![
            ("Sales", 0, 6500),
            ("Administration", 0, 16000),
            ("Information Technology", 0, 30000),
            ("Customer Support", 0, 38000),
            ("Development", 0, 52000),
            ("Marketing", 0, 25000),
        ]))
        .series(Radar::new()
            .name("Budget vs spending")
            .data(vec![
                (vec![4200, 3000, 20000, 35000, 50000, 18000], "Allocated Budget"),
                (vec![5000, 14000, 28000, 26000, 42000, 21000], "Actual Spending"),
            ])
        );

    let mut renderer = ImageRenderer::new(1000, 800);
    renderer.save(&chart, "/tmp/radar.svg").unwrap();
}
```

--------------------------------

### Create Candlestick Chart for Financial Data

Source: https://context7.com/yuankunzhang/charming/llms.txt

Generates a financial candlestick chart for visualizing OHLC (Open-High-Low-Close) data using the Charming library. It sets up X and Y axes and provides the data for the candlestick series. The output is saved as an HTML file.

```rust
use charming::{Chart, component::Axis, df, series::Candlestick};

fn main() {
    let chart = Chart::new()
        .x_axis(Axis::new().data(vec![
            "2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"
        ]))
        .y_axis(Axis::new())
        .series(Candlestick::new().data(df![
            [20, 34, 10, 38],  // [open, close, low, high]
            [40, 35, 30, 50],
            [31, 38, 33, 44],
            [38, 15, 5, 42]
        ]));

    let renderer = HtmlRenderer::new("Stock Chart", 1200, 600);
    renderer.save(&chart, "/tmp/candlestick.html").unwrap();
}
```

--------------------------------

### Render Chart to PNG Image in Rust

Source: https://context7.com/yuankunzhang/charming/llms.txt

This code renders a chart to a PNG image using the ImageRenderer, including options for saving to a file and generating byte data. Requires the `ssr-raster` feature.

```rust
use charming::{ImageRenderer, ImageFormat, Chart, component::Axis, series::Bar};

fn main() {
    let chart = Chart::new()
        .x_axis(Axis::new().data(vec!["Product A", "Product B", "Product C"]))
        .y_axis(Axis::new())
        .series(Bar::new().data(vec![320, 450, 280]));

    let mut renderer = ImageRenderer::new(1200, 600);

    // Save as PNG
    renderer.save_format(ImageFormat::Png, &chart, "/tmp/chart.png").unwrap();

    // Or render to bytes for further processing
    let png_bytes = renderer.render_format(ImageFormat::Png, &chart).unwrap();
    println!("Generated PNG with {} bytes", png_bytes.len());
}
```

--------------------------------

### Create Scatter Plot for Data Correlation

Source: https://context7.com/yuankunzhang/charming/llms.txt

Generates a scatter plot to visualize the correlation between two variables using the Charming library. It sets up X and Y axes and populates the series with data points. The output is saved as an HTML file.

```rust
use charming::{Chart, component::Axis, series::Scatter};

fn main() {
    let chart = Chart::new()
        .x_axis(Axis::new())
        .y_axis(Axis::new())
        .series(
            Scatter::new()
                .symbol_size(20)
                .data(vec![
                    vec![10.0, 8.04],
                    vec![8.07, 6.95],
                    vec![13.0, 7.58],
                    vec![9.05, 8.81],
                    vec![11.0, 8.33],
                    vec![14.0, 7.66],
                    vec![13.4, 6.81],
                    vec![10.0, 6.33],
                    vec![14.0, 8.96],
                    vec![12.5, 6.82],
                ])
        );

    let renderer = HtmlRenderer::new("Scatter Plot", 800, 600);
    renderer.save(&chart, "/tmp/scatter.html").unwrap();
}
```

--------------------------------

### Create Nightingale Rose Chart with Custom Styling

Source: https://context7.com/yuankunzhang/charming/llms.txt

Generates a Nightingale rose chart (a type of pie chart where slices have different radii based on value) using the Charming library. It customizes the rose type to 'Radius', sets the radius and center, and applies item styling with a border radius. The output is saved as an SVG file.

```rust
use charming::{
    Chart,
    ImageRenderer,
    component::Legend,
    element::ItemStyle,
    series::{Pie, PieRoseType},
};

fn main() {
    let chart = Chart::new()
        .legend(Legend::new().top("bottom"))
        .series(
            Pie::new()
                .name("Nightingale Chart")
                .rose_type(PieRoseType::Radius)
                .radius(vec!["50", "150"])
                .center(vec!["50%", "50%"])
                .item_style(ItemStyle::new().border_radius(8))
                .data(vec![
                    (40.0, "rose 1"),
                    (38.0, "rose 2"),
                    (32.0, "rose 3"),
                    (30.0, "rose 4"),
                    (28.0, "rose 5"),
                    (26.0, "rose 6"),
                    (22.0, "rose 7"),
                    (18.0, "rose 8"),
                ])
        );

    let mut renderer = ImageRenderer::new(1000, 800);
    renderer.save(&chart, "/tmp/nightingale.svg").unwrap();
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.