Как убрать подписи снизу только на маленьких разрешениях?

Question

[z_u_q]

Есть график.
На маленьких разрешениях подписи сморятся странно:


Я бы хотел их убрать.

Возможно ли такое в данном варианте?

Answer 1

[Anton fon Faust]

В js определяете разрешение и если оно меньше нужного, не заполняйте labels

Answer 2

[0xD34F]

Есть разные варианты не отображать подписи:

1. Запретить отображение отметок на осях:
   
   

   options: {
     scales: {
       xAxes: [ {
         ticks: {
           display: false,

   
   
2. Указать в labels пустые строки:
   
   

   data: {
     labels: [ '', '', '', ... ],

   
   
3. Сделать размер шрифта нулевым:
   
   

   options: {
     scales: {
       xAxes: [ {
         ticks: {
           fontSize: 0,

   
   
4. Сделать текст прозрачным:
   
   

   options: {
     scales: {
       xAxes: [ {
         ticks: {
           fontColor: 'transparent',

   
   

Если надо динамически убирать/показывать подписи, то добавляете обработчик resize:

options: {
  onResize(chart, size) {
    // изменяете в зависимости от размеров одну из перечисленных
    // выше настроек (display, labels, fontSize, fontColor), например:
    chart.options.scales.xAxes[0].ticks.display = size.width >= 500;

    // обновляете график
    chart.update();
  },

https://jsfiddle.net/7hkfpqz3/2/

Answer 3

[AdamWest23]

Столкнулся с поведением, что на мобилках подписи увeличивались. Тоже сперва хотели убрать. Вопрос решился отключением флага
options.responsive = false