javascript - Chartjs - first x-axis tick is not displayed - Stack Overflow

admin管理员组

文章数量:1330663

As you can see in the picture the first tick (14 september) is not showed on the x axis.

Are there any options to enforce chartjs to display the tick?

Configuration for the x axis:

xAxes: [{
        type: 'time',
        time: {
            tooltipFormat: "DD-MMMM-YYYY",
            parser: function (value) {
                return moment(value).locale("RO");
            },
            displayFormats: {
                'day': 'DD MMM'
            },
            unit:'day'
        },

        display: true
    }],

Thank you, Catalin

As you can see in the picture the first tick (14 september) is not showed on the x axis.

Are there any options to enforce chartjs to display the tick?

Configuration for the x axis:

xAxes: [{
        type: 'time',
        time: {
            tooltipFormat: "DD-MMMM-YYYY",
            parser: function (value) {
                return moment(value).locale("RO");
            },
            displayFormats: {
                'day': 'DD MMM'
            },
            unit:'day'
        },

        display: true
    }],

Thank you, Catalin

• javascript
• angularjs
• chart.js

Share Improve this question Follow edited Sep 17, 2017 at 17:35 Catalin asked Sep 16, 2017 at 15:26 CatalinCatalin 76211 gold badge1717 silver badges3535 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

In the x axis settings you need add :

scales: {
xAxes: [{
bounds: 'ticks',
}]}

Not sure what this changes but it will fix your problem.

time: {
    round: 'day'
}

solved it for me

Chart.js v.4
Utilizing Version 4 of Chart.js, I acplised this by setting the bounds of the x-axis. According to the Configuration Options documentation chartjs, the default value is 'data'.

The bounds property controls the scale boundary strategy (bypassed by min/max options).

• 'data': makes sure data are fully visible, labels outside are removed
• 'ticks': makes sure ticks are fully visible, data outside are truncated

scales: {
           x: {
                 bounds: 'ticks',   //here is the answer
                 type: 'time',
                 time: {
                      unit: 'day',   
                      parser: 'DD-MMMM-YYYY',
                      tooltipFormat: 'DD-MMMM-YYYY'
                  },
                  grid: {
                    display: false
                  },
                  ticks: {                            
                    color: 'black',
                    align: 'center'                            
                  }
              }
         }

Inside callback you can write a logic to control the number of ticks.

callback(value, index, values){
    if(index === 0)
    {
        return `${value}`
    }
}

Hope this might help. For more information please refer

本文标签： javascriptChartjsfirst xaxis tick is not displayedStack Overflow