React Chart - Axis Ticks

Axis ticks divide an axis into parts, and thus the readability of visualized data is improved. There are major and minor ticks. They differ in appearance.

DevExtreme HTML5 JavaScript Charts AxisTicks

To configure major or minor ticks, use the tick or minorTick object respectively. Propertiesin these objects change the color, length, width, and opacity of ticks. But before specifying them, make sure that you have made ticks visible.

App.vue
  • <template>
  • <DxChart ... >
  • <DxArgumentAxis> <!-- or DxValueAxis, or DxCommonAxisSettings -->
  • <DxTick :visible="true"/>
  • <DxMinorTick :visible="true"/>
  • </DxArgumentAxis>
  • </DxChart>
  • </template>
  •  
  • <script>
  • import DxChart, {
  • DxArgumentAxis,
  • DxTick,
  • DxMinorTick
  • } from 'devextreme-vue/chart';
  •  
  • export default {
  • components: {
  • DxChart,
  • DxArgumentAxis,
  • DxTick,
  • DxMinorTick
  • }
  • }
  • </script>
See Also