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:
categoryAxis:
{
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:
categoryAxis:
{
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.
// select the chart element and change the default border line color.
$('#jqxChart').jqxChart({borderLineColor: 'Blue'});
// refresh the chart element
$('#jqxChart').jqxChart('refresh');
Sets the chart's background color.
// select the chart element and change the default background color.
$('#jqxChart').jqxChart({backgroundColor:'Gray'});
// refresh the chart element
$('#jqxChart').jqxChart('refresh');
Background image
Instead of using background color you can use an image:
// select the chart element and set background image.
$('#jqxChart').jqxChart({backgroundImage: '../images/chart_background.jpg'});
// refresh the chart element
$('#jqxChart').jqxChart('refresh');