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: Default gabe

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: Default uma

Select Theme for funnel plot: Default uma

Select Theme for pie chart: Default uma

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: Default brass chocolate

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: Default oldstyle