Skip to main content

​
Understanding customization

Customization allows you to adjust the appearance and behavior of your energy dashboards to match your needs. While the customization options are limited, you can still create professional visualizations that effectively communicate your energy data.

​
Available customization options

​
Timeseries chart customization

Customize timeseries charts using ECharts options. 
# Customize timeseries charts with ECharts options
timeseries_component = client.components.create_timeseries(
    name="Custom Energy Chart",
    title="Wind Farm Production",
    datasets=[production_dataset.id],
    y_axis_label="Production (MW)",
    unit="MW",
    echarts_options={
        "color": ["#3B82F6", "#10B981"],
        "grid": {
            "show": True,
            "borderColor": "#E5E7EB",
            "backgroundColor": "#F9FAFB"
        },
        "tooltip": {
            "show": True,
            "trigger": "axis",
            "backgroundColor": "rgba(255, 255, 255, 0.95)",
            "borderColor": "#E5E7EB",
            "borderWidth": 1
        },
        "legend": {
            "show": True,
            "position": "top",
            "textStyle": {
                "color": "#64748B"
            }
        }
    }
)
Available ECharts options:
  • color: Array of colors for chart elements
  • grid: Grid configuration (show, borderColor, backgroundColor)
  • tooltip: Tooltip configuration (show, trigger, backgroundColor, borderColor)
  • legend: Legend configuration (show, position, textStyle)

​
Predefined themes

For quick styling, you can use predefined themes instead of custom ECharts options: 
# Use predefined themes
timeseries_component = client.components.create_timeseries(
    name="Wind Energy Chart",
    title="Wind Farm Production",
    datasets=[production_dataset.id],
    theme="wind_dark"  # Available themes: "wind_light", "wind_dark"
)
Available themes:
  • wind_light: Light theme optimized for wind energy data
  • wind_dark: Dark theme optimized for wind energy data
  • solar_light: Light theme optimized for solar energy data
  • solar_dark: Dark theme optimized for solar energy data
Themes automatically apply appropriate colors, grid styling, and other visual elements for energy data visualization.

​
Map styling

Customize map appearance by selecting different map styles. 
# Customize map appearance
map_component = client.components.create_map(
    name="Custom Map",
    config=MapConfig(
        latitude=55.2,
        longitude=3.5,
        zoom=8,
        map_style="mapbox://styles/mapbox/satellite-v9"  # Choose map style
    )
)
Available map styles:
  • mapbox://styles/mapbox/streets-v12 - Street view
  • mapbox://styles/mapbox/outdoors-v12 - Outdoor view
  • mapbox://styles/mapbox/light-v11 - Light theme
  • mapbox://styles/mapbox/dark-v11 - Dark theme
  • mapbox://styles/mapbox/satellite-v9 - Satellite view
  • mapbox://styles/mapbox/satellite-streets-v12 - Satellite with streets

​
Layer styling

Customize layer appearance using DeckGL properties. 
# Customize layer appearance with DeckGL properties
layer = client.layers.create_layer(
    name="Custom Layer",
    type="ScatterPlotLayer",
    dataset_id=dataset.id,
    deckgl_props={
        "getFillColor": [255, 0, 0],      # Red color
        "getRadius": 1000,                # Size
        "opacity": 0.8,                   # Transparency
        "getLineColor": [0, 0, 0],        # Border color
        "lineWidthMinPixels": 2,          # Border width
        "radiusScale": 500,               # Scale factor
        "radiusMinPixels": 3,             # Minimum size
        "radiusMaxPixels": 15             # Maximum size
    }
)
Common DeckGL properties:
  • getFillColor: Fill color for points/polygons
  • getLineColor: Border color for points/polygons
  • getRadius: Size of points
  • opacity: Transparency level (0-1)
  • lineWidthMinPixels: Border width
  • radiusScale: Scale factor for point sizes
  • radiusMinPixels/radiusMaxPixels: Size constraints

​
UI configuration for layers

Add interactive controls for layer properties. 
# Layer with UI controls
ui_controlled_layer = client.layers.create_layer(
    name="Interactive Layer",
    type="ScatterPlotLayer",
    dataset_id=dataset.id,
    deckgl_props={
        "getFillColor": [0, 255, 0],
        "getRadius": 1000,
        "opacity": 0.8
    },
    ui_config={
        "controls": {
            "size_control": {
                "property": "getRadius",
                "type": "slider",
                "default": 1000,
                "range": [100, 2000],
                "label": "Point Size"
            },
            "opacity_control": {
                "property": "opacity",
                "type": "slider",
                "default": 0.8,
                "range": [0, 1],
                "label": "Opacity"
            },
            "color_control": {
                "property": "getFillColor",
                "type": "colorScheme",
                "default": [0, 255, 0],
                "label": "Point Color"
            }
        }
    }
)
Available UI control types:
  • slider: Numeric slider with range [min, max] values
  • colorScheme: Color picker for color properties
  • dataColumn: Data-driven property selection
  • toggle: Boolean on/off control
  • dropdown: Selection from predefined options
UI Configuration Structure:
  • controls: Dictionary of control configurations
  • property: Target DeckGL property name
  • type: Control type (slider, colorScheme, etc.)
  • default: Default value for the control
  • range: Min/max values for slider type [min, max]
  • options: Available options for dropdown/colorScheme types
  • label: Display label for the control

​
Customization examples

​
Energy monitoring dashboard

# Create a customized energy monitoring dashboard
production_chart = client.components.create_timeseries(
    name="Production Chart",
    title="Energy Production",
    datasets=[production_dataset.id],
    y_axis_label="Production (MW)",
    unit="MW",
    echarts_options={
        "color": ["#10B981"],
        "grid": {"show": True, "borderColor": "#E5E7EB"},
        "tooltip": {"show": True, "trigger": "axis"}
    }
)

asset_map = client.components.create_map(
    name="Asset Map",
    config=MapConfig(
        latitude=55.2,
        longitude=3.5,
        zoom=8,
        map_style="mapbox://styles/mapbox/outdoors-v12"
    ),
    layer_ids=[turbine_layer.id]
)

# Create dashboard with components
dashboard = client.dashboards.create_dashboard(
    name="Custom Energy Dashboard",
    components=[production_chart.id, asset_map.id],
    react_grid_layout_config=ReactGridLayoutConfig(
        cols=12,
        row_height=150,
        margin=[10, 10],
        container_padding=[10, 10],
        is_draggable=True,
        is_resizable=True
    )
)

​
Weather visualization

# Create a customized weather visualization
weather_chart = client.components.create_timeseries(
    name="Weather Data",
    title="Wind Speed",
    datasets=[wind_dataset.id],
    y_axis_label="Wind Speed (m/s)",
    unit="m/s",
    echarts_options={
        "color": ["#3B82F6"],
        "grid": {"show": True},
        "tooltip": {"show": True}
    }
)

weather_map = client.components.create_map(
    name="Weather Map",
    config=MapConfig(
        latitude=55.2,
        longitude=3.5,
        zoom=6,
        map_style="mapbox://styles/mapbox/satellite-v9"
    ),
    layer_ids=[wind_speed_layer.id]
)

​
Important limitations

  • No custom CSS: Custom CSS injection is not implemented
  • No custom JavaScript: Custom JavaScript injection is not implemented
  • Limited UI controls: Only basic layer controls (slider, colorScheme, toggle, dropdown) are available
  • No responsive breakpoints: Only single layout configuration is supported
  • No custom components: Only predefined component types are available
  • Limited chart customization: Only basic ECharts options are supported
  • Limited map customization: Only map style selection is available
  • No global controls: Dashboard-level controls are not implemented
  • No animation controls: Chart animations cannot be customized

​
Best practices

​
Design consistency

  • Use consistent colors across your visualizations
  • Choose appropriate map styles for your data
  • Use clear, readable labels and titles
  • Maintain visual hierarchy in your charts

​
Performance optimization

  • Use appropriate layer sizes and opacity levels
  • Limit the number of data points in charts
  • Choose efficient map styles for your use case
  • Test dashboard performance with your actual data

​
User experience

  • Use descriptive component names
  • Provide clear axis labels and units
  • Choose appropriate color schemes for your data
  • Test your customizations with real data

​
Accessibility

  • Ensure sufficient color contrast in your charts
  • Use clear, readable fonts and sizes
  • Provide descriptive titles and labels
  • Test with different screen sizes

​
Next steps

Now that you understand customization, explore other features:

Components

Learn about available component types.

Dashboards

Create and manage dashboards.

Weather Integration

Add weather data to your visualizations.

API Reference

Explore all component endpoints and options.