# Tick Configuration

This sample shows how to use different tick features to control how tick labels are shown on the X axis. These features include:

  • Multi-line labels
  • Filtering labels
  • Changing the tick color
  • Changing the tick alignment for the X axis
const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Chart with Tick Configuration'
      }
    },
    scales: {
      x: {
        ticks: {
          // For a category axis, the val is the index so the lookup via getLabelForValue is needed
          callback: function(val, index) {
            // Hide every 2nd tick label
            return index % 2 === 0 ? this.getLabelForValue(val) : '';
          },
          color: 'red',
        }
      }
    }
  },
};

# Docs

Last Updated: 8/3/2022, 12:46:38 PM