How to display axis labels between the ticks in JavaScript Chart ?

Essential Chart supports placing the labels in the X-axis between the ticks or on the ticks by using the LabelPlacement property of the axis. This property takes either onTicks or betweenTicks as values. By default, labels in categorical axis are placed between the ticks and labels in the numerical axis are placed near the ticks. Refer to the Axis for more information on the types of axes supported by the Essential Chart. Only category axis supports placing labels between ticks and other types of axes places labels near the ticks.

JS

<div id="container"></div>
<script type="text/javascript">
$(function () {
    $("#container").ejChart({
        primaryXAxis:
        {
            labelPlacement: 'betweenTicks'
        },                
        . . .
    });
});
</script>

The following screenshot displays the axis labels between the ticks.

Figure: Chart with labels placed between the ticks

JS Playground sample link: Label Placement

Conclusion

I hope you enjoyed learning about how to  display axis labels between the ticks in JavaScript Chart.

You can refer to our JavaScript Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!