Code: Select all
<h5>Stacked</h5>
<p:barChart model="#{dashboardMB.stackedBarModel}" style="width: 100%; height: 500px;"/>
Code: Select all
public void createStackedBarModel() {
stackedBarModel = new BarChartModel();
ChartData data = new ChartData();
BarChartDataSet barDataSet = new BarChartDataSet();
barDataSet.setLabel("Dataset 1");
barDataSet.setBackgroundColor("rgb(255, 99, 132)");
List<Number> dataVal = new ArrayList<>();
dataVal.add(62);
dataVal.add(-58);
dataVal.add(-49);
dataVal.add(25);
dataVal.add(4);
dataVal.add(77);
dataVal.add(-41);
barDataSet.setData(dataVal);
BarChartDataSet barDataSet2 = new BarChartDataSet();
barDataSet2.setLabel("Dataset 2");
barDataSet2.setBackgroundColor("rgb(54, 162, 235)");
List<Number> dataVal2 = new ArrayList<>();
dataVal2.add(-1);
dataVal2.add(32);
dataVal2.add(-52);
dataVal2.add(11);
dataVal2.add(97);
dataVal2.add(76);
dataVal2.add(-78);
barDataSet2.setData(dataVal2);
BarChartDataSet barDataSet3 = new BarChartDataSet();
barDataSet3.setLabel("Dataset 3");
barDataSet3.setBackgroundColor("rgb(75, 192, 192)");
List<Number> dataVal3 = new ArrayList<>();
dataVal3.add(-44);
dataVal3.add(25);
dataVal3.add(15);
dataVal3.add(92);
dataVal3.add(80);
dataVal3.add(-25);
dataVal3.add(-11);
barDataSet3.setData(dataVal3);
data.addChartDataSet(barDataSet);
data.addChartDataSet(barDataSet2);
data.addChartDataSet(barDataSet3);
List<String> labels = new ArrayList<>();
labels.add("January");
labels.add("February");
labels.add("March");
labels.add("April");
labels.add("May");
labels.add("June");
labels.add("July");
data.setLabels(labels);
stackedBarModel.setData(data);
//Options
BarChartOptions options = new BarChartOptions();
CartesianScales cScales = new CartesianScales();
CartesianLinearAxes linearAxes = new CartesianLinearAxes();
linearAxes.setStacked(true);
linearAxes.setOffset(true);
cScales.addXAxesData(linearAxes);
cScales.addYAxesData(linearAxes);
options.setScales(cScales);
Title title = new Title();
title.setDisplay(true);
title.setText("Bar Chart - Stacked");
options.setTitle(title);
Tooltip tooltip = new Tooltip();
tooltip.setMode("index");
tooltip.setIntersect(false);
options.setTooltip(tooltip);
stackedBarModel.setOptions(options);
}
https://imgur.com/YBvKHQ3
https://www.primefaces.org/showcase/ui/ ... fwid=e8f1e
See the example in production the before and after
With Primefaces 10.0.7
https://www.loom.com/share/ca3919221a15 ... e41843cf2b
With Primefaces 11.0.4
https://www.loom.com/share/e9c0ac3e7df9 ... 19deb49c6a
Dependency
Babylon-theme5.1.0
Primefaces11.0.4