Blogs

The jqxChart plug-in comes with 11 color schemes, but it is also possible to set your own colors for drawing the chart series. To customize the built-in rendering of the Chart series, you need to set the ‘color’ property of each serie to a valid ‘hex’ color value. Code example:

seriesGroups:
    [
        {
            type: 'stackedcolumn100',
            columnsGapPercent: 100,
            seriesGapPercent: 5,
            valueAxis:
            {
                unitInterval: 10,
                minValue: 0,
                maxValue: 100,
                displayValueAxis: true,
                description: 'Time in minutes',
                axisSize: 'auto',
                tickMarksColor: '#888888'
            },
            series: [
                    { color: "#33769E", dataField: 'Running', displayText: 'Running' },
                    { color: "#C5845D", dataField: 'Swimming', displayText: 'Swimming' },
                    { color: "#5B339E", dataField: 'Cycling', displayText: 'Cycling' }
                ]
        }
    ]