O'Reilly logo

Learning jqPlot by Scott Gottreu

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling our chart and adding functionality

We know that management wants these charts, so we will do our best with what we've got. We know we need to modify the fill color for our pie pieces. We also decide that we want to break our pieces apart.

We only need to add a couple of options to our existing chart. We set sliceMargin under rendererOptions to 5, and this will break our pieces apart by 5 pixels. We also make use of the seriesColors option and pass in an array of hexadecimal color values. We finish by moving the legend to the left of the chart:

...
    seriesDefaults: {
      renderer:$.jqplot.PieRenderer,
      rendererOptions: { 
        showDataLabels: true, 
        startAngle: -90, 
        dataLabelThreshold: 0, 
        sliceMargin: 5
      }
    },
    seriesColors: [ "#4bb2c5", "#F4CA4A", "#EAA228", ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required