Customize primefaces chart

Question

I using of primefaces's chart on my project.

I know be primefaces's chart use of jqplot .

on jqplot's site exist example of customizing jqplot chart.

how to use of example codes for customizing primefaces chart ?

sample code for customizing jqplot chart is following :

$(document).ready(function () {
$.jqplot._noToImageButton = true;
var plot1 = $.jqplot("chart1", [prevYear, currYear], {
    seriesColors: ["rgba(78, 135, 194, 0.7)", "rgb(211, 235, 59)"],
    title: 'Monthly TurnKey Revenue',
    highlighter: {
        show: true,
        sizeAdjust: 1,
        tooltipOffset: 9
    },
    grid: {
        background: 'rgba(57,57,57,0.0)',
        drawBorder: false,
        shadow: false,
        gridLineColor: '#666666',
        gridLineWidth: 2
    },
    legend: {
        show: true,
        placement: 'outside'
    },
    seriesDefaults: {
        rendererOptions: {
            smooth: true,
            animation: {
                show: true
            }
        },
        showMarker: false
    },
    series: [
        {
            fill: true,
            label: '2010'
        },
        {
            label: '2011'
        }
    ],
    axesDefaults: {
        rendererOptions: {
            baselineWidth: 1.5,
            baselineColor: '#444444',
            drawBaseline: false
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
                formatString: "%b %e",
                angle: -30,
                textColor: '#dddddd'
            },
            min: "2011-08-01",
            max: "2011-09-30",
            tickInterval: "7 days",
            drawMajorGridlines: false
        },
        yaxis: {
            renderer: $.jqplot.LogAxisRenderer,
            pad: 0,
            rendererOptions: {
                minorTicks: 1
            },
            tickOptions: {
                formatString: "$%'d",
                showMark: false
            }
        }
    }
});

  $('.jqplot-highlighter-tooltip').addClass('ui-corner-all')
});

example link 1

how to use of above code on primefaces chart ?

Answer 1

When you use extender you can change everything by js.

Here is an example

<p:lineChart ... extender="chartExtender"/>

And on js file or in the page under Tag:

function chartExtender() {        
 // this = chart widget instance        
 // this.cfg = options        
 this.cfg.grid = {             
        background: 'transparent',
         gridLineColor: '#303030',
         drawBorder: false,
    };
  }

This is just an example.. This will help you to do the rest.

For more recent PF versions, check What is the alternative for the chart extender attribute in PrimeFaces 5.2 and newer Hope that helps :)

Answer 2

I didn't bother to customize the PrimeFaces charts. I opted to use Google charts in my JSF application. It's highly customizable and it's rendered as SVG so additionally you can use CSS to style your graphs. You can have a look at the GChart PrimeFaces extension or simply load the JavaScript customize everything (it's easy and well documented).