Show label in charts

Post Reply
marcelocaser
Posts: 91
Joined: 13 Dec 2011, 15:07

25 May 2017, 14:57

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.

aragorn
Posts: 3740
Joined: 29 Jun 2013, 12:38

26 May 2017, 14:03

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
    }
}

marcelocaser
Posts: 91
Joined: 13 Dec 2011, 15:07

26 May 2017, 14:51

Hi,

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

aragorn
Posts: 3740
Joined: 29 Jun 2013, 12:38

26 May 2017, 14:58

You're welcome! For other issue, please try;

Code: Select all

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

marcelocaser
Posts: 91
Joined: 13 Dec 2011, 15:07

26 May 2017, 17:26

Very nice!!

Thank you again!

aragorn
Posts: 3740
Joined: 29 Jun 2013, 12:38

27 May 2017, 21:01

Glad to hear, thanks for the update!

Post Reply

Return to “Poseidon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest