Left-Align Bar Chart Category Axis Labels

Environment

Product Chart for ProgressĀ® Kendo UIĀ®
Product Version 2019.1.220

Description

How can I align the category axis labels of the Kendo UI Bar Chart to the left?

Solution

Use the Kendo UI Drawing API to customize the appearance of the labels in the Bar Chart. You can adjust the following suggested approach to your preferences:

  1. Create a new function within the categoryAxis.labels.visual configuration.
  2. Initialize a new kendo.drawing.Group object.
  3. Set the appearance of the label with the kendo.drawing.Text element.
  4. Configure the rectangle which will hold the text.
  5. Use the kendo.drawing.align method to set the alignment within the rectangle.
  6. Append the elements together within the group, and return the results.

    ```javascript
              labels: {
                visual: function(e){  //1
                  var group = new kendo.drawing.Group();  //2
    
                  var text = new kendo.drawing.Text(e.value, e.rect.origin, { font: "Verdana; font-weight: bold;" });  //3
                  var rect = new kendo.geometry.Rect(e.rect.origin, [60, 20]);  //4
                  kendo.drawing.align([text], rect, "start");  //5
    
                  group.append(new kendo.drawing.Rect(rect, { fill: null, stroke: null}), text);  //6
                  return group;
                }
              },
            },
    ```
    

The following example demonstrates the full implementation of the suggested approach.

The following example demonstrates the full implementation of the suggested approach.

    <div id="chart"></div>
    <script>
      $("#chart").kendoChart({
        seriesDefaults: {
          type: "bar"
        },
        series: [{
          data: [
            20, 10, 5
          ],
        }],     
        categoryAxis: {
          labels: {
            visual: function(e){
              var group = new kendo.drawing.Group();

              var text = new kendo.drawing.Text(e.value, e.rect.origin, { font: "Verdana; font-weight: bold;" });
              var rect = new kendo.geometry.Rect(e.rect.origin, [60, 20]);
              kendo.drawing.align([text], rect, "start");

              group.append(new kendo.drawing.Rect(rect, { fill: null, stroke: null}), text);
              return group;
            }
          },
          categories: ["First", "Second", "Third"]
        }
      });
    </script>

See Also

In this article
Not finding the help you need? Improve this article