Search code examples
chartslabelag-gridstylingaxes

How to stylistically edit axes labels on AG-GRID standalone charts?

I'm working with ag-Grid to create both tables and charts. I've read through all of the documentation on editing the labels on the axes of grouped, stacked and normalised columns and bar graphs and although there's information on how to format labels on AG-Grid charts, there isn't a way (it seems) to edit them such that they don't overlap when there are multiple labels.

For example I have a line chart below:

enter image description here

The labels on the x-axis are clustered together because each point on the line chart is titled a lengthy word/phrase. I've tried to add padding on the label (second line)

this.options.axes = [
    { type: 'category', position: 'left' },
    { type: 'number', position: 'bottom', label: { padding: 10 } }
]

However it doesn't help the situtation. How can I make it so that either the label is removed altogether or whenever the labels on the axes are over a certain length then it narrows down to just a few letters and then show an ellipses?

For example in the image, the first label 'Business-as-usual' would be narrowed down to just 'Bu..'?

Solution

  • there are two ways to accomplish this. padding won't help you much in this case.

    1. you can use label formatter function to narrow down the label to just a few letters and then show an ellipses.
    2. you can use rotation property to rotate the label(if chart container has enough space) to desired degree so that labels don't overlap.

    var options = {
  container: document.getElementById('myChart'),
  data: [{
      os: 'this is pretty long word and will overlap with other labels Windows',
      share: 88.07
    },
    {
      os: 'macOS',
      share: 9.44
    },
    {
      os: 'Linux',
      share: 1.87
    },
    {
      os: 'Other hgyhtghygyh Linux ',
      share: 1.87
    },
  ],
  series: [{
    type: 'column',
    xKey: 'os',
    yKeys: ['share'],
  }, ],
  axes: [{
      type: 'category',
      position: 'bottom',
      title: {
        text: 'Desktop Operating Systems',
        enabled: false,
      },
      label: {
        formatter: function(params) {
          if (params.value.length > 10) {
            return params.value.substr(0, 6) + '...';
          }
          return params.value
        },
      }
    },
    {
      type: 'number',
      position: 'left',
      title: {
        text: 'Market Share (%)',
        enabled: false,
      },
      label: {
        formatter: function(params) {

          return params.value + '%';
        },
      },
    },
  ],
  legend: {
    enabled: false,
  },
};
var options1 = {
  container: document.getElementById('myChart1'),
  data: [{
      os: 'this is pretty long word and will overlap with other labels Windows',
      share: 88.07
    },
    {
      os: 'macOS',
      share: 9.44
    },
    {
      os: 'Linux',
      share: 1.87
    },
    {
      os: 'Other hgyhtghygyh Linux ',
      share: 1.87
    },
  ],
  series: [{
    type: 'column',
    xKey: 'os',
    yKeys: ['share'],
  }, ],
  axes: [{
      type: 'category',
      position: 'bottom',
      title: {
        text: 'Desktop Operating Systems',
        enabled: false,
      },
      label: {
        rotation: 90
      }
    },
    {
      type: 'number',
      position: 'left',
      title: {
        text: 'Market Share (%)',
        enabled: false,
      },
      label: {
        formatter: function(params) {

          return params.value + '%';
        },
      },
    },
  ],
  legend: {
    enabled: false,
  },
};
agCharts.AgChart.create(options);
agCharts.AgChart.create(options1);
    <!DOCTYPE html>
<html lang="en">

<head>
  <script>
    var __basePath = './';
  </script>
  <style media="only screen">
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
    }
    
    html {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      overflow: auto;
    }
    
    body {
      padding: 1rem;
      overflow: auto;
    }
  </style>
  <script src="https://unpkg.com/ag-charts-community@2.1.0/dist/ag-charts-community.min.js"></script>
</head>

<body>
  <div id="myChart" style="height: 100%;"></div>
  <div id="myChart1" style="height: 100%;"></div>

</body>

</html>