title: Customize Bar-series and BarCategoryAxis in QML
body: <p>I need to customize the <code>BarCategoryAxis</code> labels and <code>BarSeries</code>. Following is the code:</p>
  
  <pre><code>import QtQuick 2.6
  import QtQuick.Window 2.2
  import QtQuick.Controls 2.0
  import QtCharts 2.2
  
  ApplicationWindow {
      id: window
      width: 640
      height: 480
      visible: true
  
      ChartView {
          id: chartview
          width: parent.width
          height: 300
  
          BarSeries {
              name: "BarSeries"
              axisX: BarCategoryAxis {
                  id:barAxis
                  property int minCategory: 10
                  property int maxCategory: 100
                  property int category: 50
                  categories: ["10","20","30","40","50","60","70","80","90","100"]
  
  
                  min:  Math.floor(((minCategory + sb.position *
                                     (maxCategory - minCategory - category)) + 9)/10)*10
  
                  max: Math.floor((((minCategory + sb.position *
                                     (maxCategory - minCategory - category)) + category) + 9)/10) *10
              }
  
              axisY: ValueAxis {
                  id:axisY
                  min: 0
                  max: 70
                  tickCount: 5
                  labelFormat: "%.0f"
              }
  
              BarSet { values: [2, 2, 3, 4, 5, 6,7] }
              BarSet { values: [5, 1, 2, 4, 1, 7] }
              BarSet { values: [3, 5, 8, 13, 5, 8] }
          }
  
      }
  
      Slider {
          id: sb
          anchors {
              bottom: parent.bottom
              left: parent.left
              right: parent.right
          }
          height: 30
      }
  }
  </code></pre>
  
  <p>1) How to align the <code>X Axis</code> labels exactly below the grid? currently, it is at center as below:</p>
  
  <p><a href="https://i.stack.imgur.com/AwDKc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AwDKc.png" alt="enter image description here"></a></p>
  
  <p>I Tried with <code>ValueAxis</code> but it will not plot the bars properly but labels will be exactly below the grid.</p>
  
  <p>2) Currently, <code>slider</code> moves the graph but not fluent. Can anyone suggest a better approach? </p>