Chart Styling

jqxChart offers many options to customize the chart appearance and colors. In this section we will go through the styling options available in different chart elements.

Series Color Scheme

jqxChart ships with eleven built-in color schemes which are used to automatically set colors for different series. You can change the color scheme by setting the colorScheme option of the chart. The available value are from 'scheme01' to 'scheme11'.

Color Gradients

jqxChart uses fill gradients built from the base colors in the color schemes. If you wish to use only basic fill colors you can turn off the gradients at series or seriesGroup level by setting the useGradient property. If the property is not set jqxChart will use gradients by default.

seriesGroups:
    [
        {
            type: 'splinearea',
            useGradient: false, // disable gradient for the entire group
            valueAxis:
            {
                unitInterval: 10,
                minValue: 0,
                maxValue: 100,
                displayValueAxis: false,
                description: 'Goal in minutes',
                axisSize: 'auto',
                tickMarksColor: '#888888'
            },
            series: [
                    { dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
                ]
        },
        {
            type: 'stackedcolumn',
            columnsGapPercent: 100,
            seriesGapPercent: 5,
            useGradient: false, // disable gradient for the entire group
            valueAxis:
            {
                unitInterval: 10,
                minValue: 0,
                maxValue: 100,
                displayValueAxis: true,
                description: 'Time in minutes',
                axisSize: 'auto',
                tickMarksColor: '#888888',
                gridLinesColor: '#777777'
            },
            series: [
                    // override the useGradient property at series level
                    { dataField: 'Running', displayText: 'Running', useGradient: true },
                    { dataField: 'Swimming', displayText: 'Swimming' },
                    { dataField: 'Cycling', displayText: 'Cycling' }
                ]
        }
    ]


With jqxChart you can define custom Colors for the series by setting their color property.

seriesGroups:
    [
        {
            type: 'line',
            valueAxis:
            {
                unitInterval: 500,
                minValue: 0,
                maxValue: 3000,
                displayValueAxis: true,
                description: 'Daily Closing Price',
                axisSize: 'auto',
                tickMarksColor: '#888888'
            },
            series: [
                    { dataField: 'S&P 500', displayText: 'S&P 500', color: '#ff0000' },
                    { dataField: 'NASDAQ', displayText: 'NASDAQ', color: '#0000ff' }
                ]
        }
    ]

Grid lines

You can adjust the spacing and colors of the horizontal and vertical grid lines. The vertical gridlines can be adjusted by changing the categoryAxis options. For example the following code makes the vertical grid lines visible, makes their color blue and sets the spacing between the lines such that a line appears once for every tenth element:

xAxis: 
{ 
    gridLinesColor: '#0000FF',
    showGridLines: true,
    gridLinesInterval: 10 
}

    

The horizontal grid lines can be changed by setting the gridLinesColor, showGridLines and gridLinesInterval options on valueAxis for each seriesGroup.
valueAxis: 
{ 
    gridLinesColor: '#0000FF',
    showGridLines: true,
    gridLinesInterval: 20
}

    

Tick marks

Tick marks and grid lines work in a very similar way and jqxChart offers identical properties.
To change the tick marks across the horizontal axis use the showTickMarks, tickMarksColor and tickMarksInterval options of the Category Axis:

xAxis: 
{ 
    showTickMarks: true,
    tickMarksColor: '#0000FF',
    tickMarksInterval: 10 
}

    

Similar options are available for the value axis of each series group:

valueAxis:
{ 
    showTickMarks: true,
    tickMarksColor: '#0000FF', 
    tickMarksInterval: 10
}

    

Background and border line colors

You can also change the chart's border color and background fill by using the 'borderColor' and 'background' properties. Sets the chart's border color by setting the borderLineColor property.
Sets the chart's background color by setting the backgroundColor property.

Background image

Instead of using background color you can use an image by setting the backgroundImage property.