CODEWITHSUNDEEP
javascriptangularjschart.js
Catalin
Catalin

Reputation: 762

Chartjs - first x-axis tick is not displayed

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

enter image description here

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

Upvotes: 2

Views: 3004

Answers (4)

chri3g91
chri3g91

Reputation: 1410

Chart.js v.4
Utilizing Version 4 of Chart.js, I accomplised this by setting the bounds of the x-axis. According to the Configuration Options documentation chartjs.org, 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'                            
                  }
              }
         }

Upvotes: 1

twin92
twin92

Reputation: 41

time: {
    round: 'day'
}

solved it for me

Upvotes: 4

techStud
techStud

Reputation: 318

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

Upvotes: 0

SpaceHedgehog
SpaceHedgehog

Reputation: 51

In the x axis settings you need add : 

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

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

Upvotes: 4

Related Questions