0

Charts: How to set format data labels like value%

asked 2020-08-28 20:17:19 +0800

softteam gravatar image softteam
120 7

image description

I got the chart shown in the image, it is filled with a CategoryModel and I would like to append "%" to every value. My code is:

private Charts chartCumplimientoPDV;
CategoryModel model = new DefaultCategoryModel();
//Here there is some code that fills model using model.setValue(,,,)
chartCumplimientoPDV.setModel(model);

I think that I have to do something like this, but I only get "%" without values:

linePlotOptions = chartCumplimientoPDV.getPlotData().getPlotOptions().getLine();

linePlotOptions.getDataLabels().setFormat("{item.value:f}%");

Thank you,

Javier

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2020-08-31 15:29:18 +0800

cor3000 gravatar image cor3000
5399 2 7
ZK Team

updated 2020-08-31 15:29:40 +0800

the following works using ZK 9.1.0 and ZKCharts 7.2.1.1

Zul:

<zk>
    <charts width="400" height="300" title="test" apply="ChartComposer"/>
</zk>

Java:

import org.zkoss.chart.Charts;
import org.zkoss.chart.model.DefaultCategoryModel;
import org.zkoss.chart.plotOptions.LinePlotOptions;
import org.zkoss.zk.ui.util.Composer;

public class ChartComposer implements Composer<Charts> {
    @Override
    public void doAfterCompose(Charts chart) throws Exception {
        chart.setType(Charts.LINE);
        DefaultCategoryModel model = new DefaultCategoryModel();
        model.setValue("Pork", "2018", 25.3);
        model.setValue("Pork", "2019", 19.2);
        model.setValue("Pork", "2020", 30);
        model.setValue("Beef", "2018", 74.7);
        model.setValue("Beef", "2019", 80.8);
        model.setValue("Beef", "2020", 70);
        chart.setModel(model);
        LinePlotOptions linePlotOptions = chart.getPlotOptions().getLine();
        linePlotOptions.getDataLabels().setFormat("{y}%");
        linePlotOptions.getDataLabels().setEnabled(true);
    }
}

Result:

image description

link publish delete flag offensive edit
0

answered 2020-08-31 14:14:21 +0800

cor3000 gravatar image cor3000
5399 2 7
ZK Team

Based on the highcharts demo the format strings should be like this {y}%

I tried the {point.value} as described in their docs which doesn't seem to work, maybe the docs aren't up to date.

Where did you find the {item.value} syntax?

link publish delete flag offensive edit

Comments

I tried point.value also but I think that this only works when the model is composed by Point.

I did not find item.value anyway, it only was one of my options because I set the different values of CategoryModel with: setValue(series, category, value); https://www.zkoss.org/javadoc/7.0.3/zk/org/zk

softteam ( 2020-08-31 14:16:19 +0800 )edit

so you try the {y}% pattern? BTW which ZK/ZKCharts version are you using?

cor3000 ( 2020-08-31 15:15:48 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2020-08-28 20:17:19 +0800

Seen: 10 times

Last updated: Aug 31

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More