Chart Theming

jqPlot has basic theming support for commonly styled atributes of plot elements. Upon creation, each plot will have a "themeEngine" that controls modificaition, adding, removing and activating of plot themes. In addition, each plot will have a "Default" theme which corresponds to the styling of the plot at plot creation.

Creation of new themes is easy. A "style" object is created with properties for the various plot elements to be styles. Attached to each of those is an ojbect with the actual styling properties. A simple style object might look like:

        gabe = {
            series: [
                {color: 'rgba(216, 159, 60, 0.4)'},
                {color: 'rgba(159, 216, 60, 0.4)'},
                {color: 'rgba(60, 159, 216, 0.4)'},
            ],
            grid: {
                backgroundColor: '#DEA493'
            }
        }

This new style would then be added to the plot's themeEngine as a new theme. it can then be activated by calling the plot's `activateTheme` method.

        plot1b.themeEngine.newTheme('gabe', gabe);
        plot1b.activateTheme('gabe');

Select Theme for area plot:

Themes can be reused between plots. Here a style object is created and assigned to two different plots. For convenience, the theme is given the same name when added to each plot's themeEngine. Since each plot keeps its own copy of the theme, the names do not need to be the same. Also note that themes are added as deep copies by value and not by reference. This avoids strange behavior due to the cascading nature of css related styles.

        temp = {
            seriesStyles: {
                seriesColors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo'],
                highlightColors: ['lightpink', 'lightsalmon', 'lightyellow', 'lightgreen', 'lightblue', 'mediumslateblue']
            },
            legend: {
                fontSize: '8pt'
            },
            title: {
                fontSize: '18pt'
            },
            grid: {
                backgroundColor: 'rgb(211, 233, 195)'
            }
        };

        plot3.themeEngine.newTheme('uma', temp);
        plot5.themeEngine.newTheme('uma', temp);

Select Theme for funnel and pie charts at same time:

Select Theme for funnel plot:

Select Theme for pie chart:

There are various was to create and edit themes for a plot. Below are two different methods for creating additional themes for a line plot and adding them to the plots themeEngine. Here the `axesStyles` property is used to supply styling to all axes at one time. A similar property, `seriesStyles`, exists for styling all series of a plot at one time. Note, neither of these methods is as straightforward as using the `newTheme()` method of the plots themeEngine, but are included for illustrative purposes.

        e1 = plot1.themeEngine;
        brass = e1.copy('Default', 'brass');
        brass.title.fontFamily = 'Copperplate, Impact';
        brass.grid.backgroundColor = "rgb(216, 198, 114)";
        brass.grid.drawGridlines = false;
        brass.series[0].lineWidth = 6.5;
        brass.series[0].markerOptions.show = false;
        brass.axesStyles.label.fontFamily = "Copperplate, 'Copperplate Gothic Light', Impact";
        brass.axesStyles.ticks.fontFamily = "Copperplate, 'Copperplate Gothic Light', Impact";
        brass.axesStyles.label.fontSize = '14pt';

        temp = {
            grid: {
                backgroundColor: "#593D2B",
                gridLineColor: '#E8E8E8',
                gridLineWidth: 3
            },
            title: {
                fontFamily: '"Comic Sans MS", cursive',
                fontSize: '18pt',
                textColor: '#C7CC4E'
            },
            seriesStyles: {
                color: "#DBBCAF",
                lineWidth: 8,
                markerOptions: {
                    show: false
                }
            },
            axes: {
                xaxis: {
                    label: {
                        fontFamily: '"Comic Sans MS", cursive',
                        textColor: '#C7CC4E'
                    }
                }
            }
        };

        chocolate = plot1.themeEngine.copy('Default', 'chocolate', temp);

Select theme for line chart:

The example below shows more extensive use of the various styling options to give the chart a rather ugly and dated appearence. Note that, for bar (and funnel, pie and donut charts), `highlightColors` can be specified as an array of colors which will be applied to each bar individually, as a single string giving a color to apply to all bars, or as an empty array which will force jqPlot to auto calculate highlight colors based on the current bar color.

        oldstyle = {
            title: {
                fontFamily: 'Times New Roman',
                textColor: 'black'
            },
            axesStyles: {
               borderWidth: 0,
               ticks: {
                   fontSize: '12pt',
                   fontFamily: 'Times New Roman',
                   textColor: 'black'
               },
               label: {
                   fontFamily: 'Times New Roman',
                   textColor: 'black'
               }
            },
            grid: {
                backgroundColor: 'white',
                borderWidth: 0,
                gridLineColor: 'black',
                gridLineWidth: 2,
                borderColor: 'black'
            },
            series: [
                {color: 'red', highlightColors: ['aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white', 'yellow']},
                {color: 'green', highlightColors: []},
                {color: 'blue', highlightColors: []},
                {color: 'yellow', highlightColors: 'rgb(255, 245, 185)'}
            ],
            legend: {
                background: 'white',
                textColor: 'black',
                fontFamily: 'Times New Roman',
                border: '1px solid black'
            }
        };

        plot2.themeEngine.newTheme('oldstyle', oldstyle);

Select theme for bar chart:

AJAX and JSON Data Loading via Data Renderers
Animated Charts
Animated Dashboard Sample - Filled Line with Log Axis
Area Chart
Area Chart 2
Axis Labels
Axis Labels and Rotated Text
Bar Charts
Bar Colors Example
Bezier Curve Plots
Block Plots
Bubble Charts
Bubble Plots
Candlestick and Open Hi Low Close Charts
Chart Theming
Charts with Fill Between Lines
Cumulative Density Function Chart
Dashed Lines with Smoothing
Data Point Highlighting, Tooltips and Cursor Tracking
Data Point labels
Date Axes
Date Axes 2
Date Axes, Rotated Labels and Zooming
Draw Lines on Plots - Canvas Overlay
Engel Curves
Error Bands and Confidence Intervals
Filled (Area) Charts
Force Plot to Have Tick at 0 or 100
Hidden Plots
Highlighting, Dragging Points, Cursor and Trend Lines
Line Charts and Options
Lorenz Curves
Mekko Charts
Meter Gauge
Open Hi Low Close and Candlestick Charts
Pie Charts and Options
Pie Charts and Options 2
Pie and Donut Charts
Plot Creation with jQuery Selectors
Plot Zooming and Cursor Control
Probability Density Function Chart
Pyramid Chart By Age
Pyramid Charts
Pyramid Charts 2
Quintile Pyramid Charts
Resizable Plots
Rotated Labels and Font Styling
Smoothed Lines
Vertical and Horizontal Bar Charts
Waterfall Charts
Waterfall Charts 2
Zoom Options
Zoom Proxy - Control one plot from another
Zooming
Zooming with Date and Log Axes