Page 1 of 1

Show label in charts

Posted: 25 May 2017, 14:57
by marcelocaser
Hi,

I need to show labels on my pie chart. I'm using:

ManagedBean

Code: Select all

pieModelLinha = new PieChartModel();

pieModelLinha.setLegendPosition("ne");
pieModelLinha.setShowDataLabels(true);
pieModelLinha.setExtender("skinPie");


xhtml

Code: Select all

<script type="text/javascript">
function skinPie() {
                this.cfg.shadow = false;
                this.cfg.showDataLabels = true;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#00acac', '#2f8ee5', '#efa64c', '#6c76af'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77',
                    }
                };
                this.cfg.seriesDefaults = {
                    renderer: $.jqplot.PieRenderer,
                    shadow: false,
                    lineWidth: 1,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }
</script>

...

<div class="ui-g-12 ui-lg-6">
                <div class="card">
                    <p:chart id="pie" type="pie" model="#{cacBean.pieModelLinha}" responsive="true" />
                </div>
</div>

But it does not work. I'm using Skin Extender as in the template example.

Re: Show label in charts

Posted: 26 May 2017, 14:03
by aragorn
Please try;

Code: Select all

function skinPie() {
    this.cfg.shadow = false;
    this.cfg.title = '';
    this.cfg.seriesColors = ['#00acac', '#2f8ee5', '#efa64c', '#6c76af'];
    this.cfg.grid = {
        background: '#ffffff',
        borderColor: '#ffffff',
        gridLineColor: '#F5F5F5',
        shadow: false
    };
    this.cfg.axesDefaults = {
        rendererOptions: {
            textColor: '#666F77'
        }
    };
    this.cfg.seriesDefaults = {
        renderer: $.jqplot.PieRenderer,
        shadow: false,
        lineWidth: 1,
        markerOptions: {
            shadow: false,
            size: 7,
            style: 'circle'
        }
    }
    this.cfg.seriesDefaults.rendererOptions = {
        showDataLabels: true
    }
}

Re: Show label in charts

Posted: 26 May 2017, 14:51
by marcelocaser
Hi,

Thanks again aragorn. Just one more doubt. How can I change the label color?

Re: Show label in charts

Posted: 26 May 2017, 14:58
by aragorn
You're welcome! For other issue, please try;

Code: Select all

.jqplot-pie-series.jqplot-data-label {
      color: yellow;
 }

Re: Show label in charts

Posted: 26 May 2017, 17:26
by marcelocaser
Very nice!!

Thank you again!

Re: Show label in charts

Posted: 27 May 2017, 21:01
by aragorn
Glad to hear, thanks for the update!