javascriptjqueryjqplot

How to specify bar colors in a jqPlot stacked bar chart?


How do I specify my own colors for the bars in a jqPlot stacked bar chart? I am talking about setting different colors for single bars. I have gone through a couple of examples, but all of them use the default colors. Is there a way to explicitly set the colors for the bars in a stacked bar chart?

enter image description here

Here is the code I have now:

var s1=[11,28,22,47,11,11]; 
var s2=[0,6,3,0,0,0];
var s3=[1,0,3,0,0,0 ];
var dataArray = [s1, s2, s3];

var ticks =  bcdarr;

var options = {
    title: ' STATUS',
    stackSeries: true,
    seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        pointLabels: {
            show: true
        },
        rendererOptions: { 
            barWidth: 25,
            varyBarColor: true,
            },
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks,
        },
        yaxis: {
            //autoscale: true,
            //label: 'Application Count',
            min : 0,
            tickInterval : 5,
            max:50
        }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
            angle: -30,
            fontSize: '10pt'
        }
    }
};

Solution

  • The best place to look for documentation on how to do things is the API Documentation. It has documentation on each component and plugin and the options available for each.

    As almas shaikh implied, the setting which changes the colors of the sections of the bars in a stacked barchart is the seriesColors attribute. This is an array with the colors defined as text strings as you would provide for CSS, or a style.

    In the example from which you took the above image to get (working JSFiddle): Same plot with different colors

    You can add:

    //Define colors for the stacked bars:
    seriesColors: ["#FDF396", "#ABFD96", "#96A0FD"],
    

    The complete function call would be:

    $(document).ready(function(){
      var s1 = [2, 6, 7, 10];
      var s2 = [7, 5, 3, 4];
      var s3 = [14, 9, 3, 8];
      plot3 = $.jqplot('chart3', [s1, s2, s3], {
        //Define colors for the stacked bars:
        seriesColors: ["#FDF396", "#ABFD96", "#96A0FD"],
    
        // Tell the plot to stack the bars.
        stackSeries: true,
        captureRightClick: true,
        seriesDefaults:{
          renderer:$.jqplot.BarRenderer,
          rendererOptions: {
              // Put a 30 pixel margin between bars.
              barMargin: 30,
              // Highlight bars when mouse button pressed.
              // Disables default highlighting on mouse over.
              highlightMouseDown: true    
          },
          pointLabels: {show: true}
        },
        axes: {
          xaxis: {
              renderer: $.jqplot.CategoryAxisRenderer
          },
          yaxis: {
            // Don't pad out the bottom of the data range.  By default,
            // axes scaled as if data extended 10% above and below the
            // actual range to prevent data points right on grid boundaries.
            // Don't want to do that here.
            padMin: 0
          }
        },
        legend: {
          show: true,
          location: 'e',
          placement: 'outside'
        }      
      });
      // Bind a listener to the "jqplotDataClick" event.  Here, simply change
      // the text of the info3 element to show what series and ponit were
      // clicked along with the data for that point.
      $('#chart3').bind('jqplotDataClick', 
        function (ev, seriesIndex, pointIndex, data) {
          $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
        }
      ); 
    });
    



    Additional (point labels):
    The best place to look for documentation on how to do things is the API Documentation. It has documentation on each component and plugin and the options available for each. [Restated here and at the top of the answer because I only just added the link.]

    Documentation for the point labels is in the plugin API documentation for : PointLabels (plugins/jqplot.pointLabels.js).

    Specifically, the options to show the point labels are specified in

    {
        seriesDefaults:{
          pointLabels: {show: true}
        }
    }
    

    To show the labels, but not those that are zero, you would use:

    {
        seriesDefaults:{
          pointLabels: {
              show: true,
              hideZeros: true
          }
        }
    }