Chart styling

[blades3316Member]

Maybe i missed it when I was going through the documentation and code, please excuse me if I did. How can I change the color or the style of the container for the chart itself. Specifically, I want the border around the entire chart to match the background so that it does not show up.

[Peter StoevKeymaster]

Hi blades3316,

In order to change the chart’s border color, you can use its ‘borderColor’ property.

The code example below shows how to change the Chart’s borderColor to ‘Red’.

// prepare jqxChart settings
var settings = {
    title: "Visual Web Traffic Analysis",
    description: "Unique site visitors in 2011",
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    borderColor: "#ff0000",
    categoryAxis:
        {
            text: 'Category Axis',
            textRotationAngle: 0,
            dataField: 'Date',
            formatFunction: function (value) {
                var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                return months[new Date(value).getMonth()];
            },
            showTickMarks: true,
            tickMarksInterval: Math.round(dataAdapter.records.length / 12),
            tickMarksColor: '#888888',
            unitInterval: Math.round(dataAdapter.records.length / 12),
            showGridLines: true,
            gridLinesInterval: 3 * Math.round(dataAdapter.records.length / 12),
            gridLinesColor: '#888888',
            axisSize: 'auto'
        },
    colorScheme: 'scheme06',
    seriesGroups:
        [
            {
                type: 'stackedarea100',
                valueAxis:
                {
                    unitInterval: 500,
                    minValue: 0,
                    maxValue: 3000,
                    displayValueAxis: true,
                    description: 'Daily visitors',
                    //descriptionClass: 'css-class-name',
                    axisSize: 'auto',
                    tickMarksColor: '#888888'
                },
                series: [
                        { dataField: 'SearchNonPaid', displayText: 'Non-Paid Search Traffic' },
                        { dataField: 'SearchPaid', displayText: 'Paid Search Traffic' },
                        { dataField: 'Referral', displayText: 'Referral Traffic' }
                    ]
            }
        ]
};
// setup the chart
$('#jqxChart').jqxChart(settings);

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[blades3316Member]

Thanks so much for the information, it worked. I still can’t find it in the documentation or examples. Could you please point me to the link that will get me all of the variables and options?

[Peter StoevKeymaster]

Hi blades3316,

The borderColor setting was missing in the online help docs. You can take a look at the Chart APIs here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-styling-and-appearance.htm>jquery-chart-styling-and-appearance.htm and here: jquery-chart-api.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts