Is there a way to adjust only the width of the bars in my chart without affecting the entire chart? Currently, everything is working fine but I specifically need to modify the bar width. Can someone help me with this? Below is the code I am currently using.
Java Code:
private void createTaxaRetornoEventosBarModel(){
this.taxaRetornoEventosBarModel = new BarChartModel();
ChartData data = new ChartData();
BarChartDataSet barDataSet = new BarChartDataSet();
barDataSet.setLabel("My First Dataset");
List<Number> values = new ArrayList<>();
values.add(65);
values.add(59);
values.add(80);
values.add(81);
values.add(56);
values.add(55);
values.add(40);
barDataSet.setData(values);
List<String> bgColor = new ArrayList<>();
bgColor.add("rgba(255, 99, 132, 0.2)");
bgColor.add("rgba(255, 159, 64, 0.2)");
bgColor.add("rgba(255, 205, 86, 0.2)");
bgColor.add("rgba(75, 192, 192, 0.2)");
bgColor.add("rgba(54, 162, 235, 0.2)");
bgColor.add("rgba(153, 102, 255, 0.2)");
bgColor.add("rgba(201, 203, 207, 0.2)");
barDataSet.setBackgroundColor(bgColor);
List<String> borderColor = new ArrayList<>();
borderColor.add("rgb(255, 99, 132)");
borderColor.add("rgb(255, 159, 64)");
borderColor.add("rgb(255, 205, 86)");
borderColor.add("rgb(75, 192, 192)");
borderColor.add("rgb(54, 162, 235)");
borderColor.add("rgb(153, 102, 255)");
borderColor.add("rgb(201, 203, 207)");
barDataSet.setBorderColor(borderColor);
barDataSet.setBorderWidth(1);
data.addChartDataSet(barDataSet);
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);
this.taxaRetornoEventosBarModel.setData(data);
BarChartOptions options = new BarChartOptions();
CartesianScales cScales = new CartesianScales();
CartesianLinearAxes linearAxes = new CartesianLinearAxes();
CartesianLinearTicks ticks = new CartesianLinearTicks();
ticks.setBeginAtZero(true);
linearAxes.setTicks(ticks);
cScales.addYAxesData(linearAxes);
options.setScales(cScales);
Title title = new Title();
title.setDisplay(true);
title.setText("Bar Chart");
options.setTitle(title);
Legend legend = new Legend();
legend.setDisplay(false);
legend.setPosition("top");
LegendLabel legendLabels = new LegendLabel();
legendLabels.setFontStyle("bold");
legendLabels.setFontColor("#2980B9");
legendLabels.setFontSize(24);
legend.setLabels(legendLabels);
options.setLegend(legend);
this.taxaRetornoEventosBarModel.setOptions(options);
}
XHTML and CSS, if you have any insights, please share:
<ui:composition xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui">
<div class="mt-5 d-flex justify-content-center" style="width: 100%; overflow-x: auto;">
<div style="width: max-content;">
<p:barChart model="#{MB.taxaRetornoEventosBarModel}" style="height: 400px; width: 1100px;"/>
</div>
</div>
</ui:composition>