Search code examples
htmlcssjqplot

jqplot graph text color


I am working with jqplot and I am trying to achieve couple of things

  1. I am trying to change the text color that appears along side x and y axis.
  2. I am trying to remove the graph border (Top border and Right border only)

This is what my graph looks like

enter image description here

On xaxis you will notice the numbers 30 - 90 I need that to be in white and on y axis you will notice dates, i need that to be in white as well

This is what my JS looks like

var line2 = [
    ['1/1/2008', 42],
    ['2/14/2008', 56],
    ['3/7/2008', 39],
    ['4/22/2008', 81]
];

var plot2 = $.jqplot('progress_chart', [line2], {
    seriesColors: [ "#F2A809"],

    series:[
        {
            // Change our line width and use a diamond shaped marker.
            lineWidth:5,
            markerOptions: { style:'circle' }
        }
    ],
    grid:{
        background: 'transparent',      // CSS color spec for background color of grid.
        borderColor: '#ffffff',     // CSS color spec for border around grid.
        borderWidth: 2.0           // pixel width of border around grid.
    },

    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            shadowAlpha : '0.1',
            tickOptions: {
                // labelPosition: 'middle',
                angle: 15,
                showGridline: false,
                color: '#ffffff'
            }
        },
        yaxis: {
            label: '',
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
            tickOptions: {
                showGridline: false
            }
        }
    }
});

I will really appreciate any assistance here.

UPDATE

Thanks to @redditor answer I got it to work, however that was causing everything graph x and y axis text to turn white. This particular graph was inside another div called tab-inner-content so I got it to work using the following CSS.

.tab-inner-content .jqplot-target {
    color:#ffffff !important;
}

Solution

  • jqplot uses several CSS rules to create the various graph styles. It looks like the labels are controlled by the jqplot-target class, so you need something like:

    .jqplot-target {
         color:#fff;
    }