Removing Axis Below Bars in Horizontal Bar Chart using PrimeFaces V8 HorizontalBarChartModel, JSF

Question

How do I remove the ruler (or axis) below the bars in a horizontal bar chart using HorizontalBarChartModel from org.primefaces.model.charts.hbar.HorizontalBarChartModel?

Below is my method, and I also included the figure here with the part of the chart that I really want to remove circled in red.

  private void createComparativoPorTransportadora() {
    this.comparativoPorTransportadora = new HorizontalBarChartModel();

    ChartData data = new ChartData();

    HorizontalBarChartDataSet hbarDataSet = new HorizontalBarChartDataSet();
    hbarDataSet.setLabel("Entregas");

    List<Number> values = new ArrayList<>();


    for (int i = 11; i >= 0; i--) {
      values.add(65 - 3 + i);
  }
    
    hbarDataSet.setData(values);

    List<String> bgColor = new ArrayList<>();

    for (int i = 0; i < 12; i++) {
      bgColor.add("#008C00");
    }
    
    hbarDataSet.setBackgroundColor(bgColor);

    List<String> borderColor = new ArrayList<>();
 
    for (int i = 0; i < 12; i++) {
      borderColor.add("#008C00");
    }

    hbarDataSet.setBorderColor(borderColor);
    hbarDataSet.setBorderWidth(2);


    data.addChartDataSet(hbarDataSet);

    List<String> labels = new ArrayList<>();

  
    for (int i = 0; i < 12; i++) {
      if (i <= 9) {
        labels.add("TRANSPORTADORA  "+i);
      }
      if (i  >  9) {
        labels.add("TRANSPORTADORA "+i);
      }
      
    }

    data.setLabels(labels);
    this.comparativoPorTransportadora.setData(data);

    // Options
    BarChartOptions options = new BarChartOptions();
    CartesianScales cScales = new CartesianScales();
    CartesianLinearAxes linearAxes = new CartesianLinearAxes();

    CartesianLinearTicks ticks = new CartesianLinearTicks();
    ticks.setBeginAtZero(true);
    linearAxes.setTicks(ticks);

    cScales.addXAxesData(linearAxes);
    options.setScales(cScales);

    Legend legend = new Legend();
    legend.setDisplay(false);
    options.setLegend(legend);

    this.comparativoPorTransportadora.setOptions(options);

  }

Answer 1

You should use extender. Check this guide: https://www.chartjs.org/docs/latest/samples/scale-options/ticks.html

You are looking for this part

scales: {
      x: {
        ticks: {
          callback: function(val, index) {
            return index % 2 === 0 ? this.getLabelForValue(val) : '';
          },
          color: 'red',
        }
      }
    }

You want to set callback for every value for '';