1 Reply Latest reply on Dec 12, 2016 9:54 AM by Michal Petrov

    <rich:chart>how to align xaxis labels center to bar chart?

    jj antonio Newbie

      How set label x in center of bar in chart component, I need three bar charts with diferents color but when apply the colors properties the labels lost its align and get misaligned.

       

      This I got:

       

      This is the code:bar1.PNG

      <rich:chart id="bar" hooks="hooks"  title="Bar Char">

       

                  <a4j:repeat value="#{beanTest.list}" var="test">

       

                      <rich:chartSeries color="#{test.color}" type="bar">

       

                          <rich:chartPoint    x="#{test.category}" y = "#{test.total}">

       

                          </rich:chartPoint>

                      </rich:chartSeries>

       

                  </a4j:repeat>

      </rich:chart>

       

       

      But I need Label in the center, (If I set only one charSeries I got center without colors but I need the label bar center with the different colors in each bar))

      bar2.PNG

      This is the code:

      <rich:chartSeries type="bar">

                          <a4j:repeat value="#{beanTest.list}" var="test">

                          <rich:chartPoint    x="#{test.category}" y = "#{test.total}">

       

                          </rich:chartPoint>

                          </a4j:repeat>

      </rich:chartSeries>

       

      Do you know how can I achieve this?. Thanks!!

        • 1. Re: <rich:chart>how to align xaxis labels center to bar chart?
          Michal Petrov Master

          What are you trying to do? If you just want a single series with differently colored columns you shouldn't have to change the data just so it gets rendered that way. You can change the color via hooks.drawSeries. Something like

           

          hooks = {
              drawSeries: function() {
                  var colors = ['red', 'blue', …],
                      counter = 0;
                  return function(plot, ctx, series) {
                     series.color = colors[counter];
                     counter++; 
                  }
              }(),
              …
          }