Chartjs-How can I show only 2 numbers on the xAxe in Chartjs having more than two numbers on the chart? (line chart)

by

1👍

✅

You should use a time xAxis for far more options regarding the time.

  scales: {
    xAxes: [{
      type: 'time',
      time: { 
        unit: 'year'
      }
    }]
  },

You have to import moment.js for more options with calculating and displaying your data. I used it so you can display the labels in the German date format (don’t know if you need that, just saw you’re from Germany and you use the German date format for your input).

Here’s the code for your formatted tooltips: 

  tooltips: {
    callbacks: {
      title: function(tooltipItem, data){
        return moment(tooltipItem[0].label).format('DD.MM.YYYY')
      }
    }
  }

Here’s all the code in a JSBin

P.S.: You have wrong dates, e.g. ‘2018-01-01’ instead of ‘2019-01-01’ and you don’t need extra labels when you put them in you data.

0👍

As you’re plotting a time series you should use the time axis type. To use it you first need to correct your dataset:

  1. Dates must be be provided in an unambiguous format (which means ISO-8601): YYYY-MM-DD.
  2. Your dates must be sorted in chronological order. Your question shows 2018-01 after 2018-10 in both the image and the code, which is clearly a bug.

Once this is done you can simply configure the time axis to display only years, as desired:

options: {
  scales: {
    xAxes: [{
      type: "time",
      time: {
        unit: "year"
      }
    }
  }
}

Below is a fully working example using your dataset (corrected as detailed above). Note that you don’t need to provide labels as the time axis automatically calculates the tick labels.

var config = {
  type: 'line',
  data: {
    datasets: [{
      label: 'Modell',
      data: [{
          x: '2018-01-01',
          y: -4.50
        }, {
          x: '2018-01-04',
          y: -4.05

        }, {
          x: '2018-01-11',
          y: -3.76
        },
        {
          x: '2018-01-18',
          y: -3.64
        }, {
          x: '2018-01-25',
          y: -3.38

        }, {
          x: '2018-10-26',
          y: -4.43
        }, {
          x: '2018-11-02',
          y: -3.47

        }, {
          x: '2018-11-09',
          y: -3.34
        },
        {
          x: '2018-11-16',
          y: -3.62
        }, {
          x: '2018-11-23',
          y: -4.20

        }, {
          x: '2018-11-30',
          y: -3.70
        },
        {
          x: '2018-12-07',
          y: -4.04
        }, {
          x: '2018-12-14',
          y: -3.75

        }, {
          x: '2018-12-21',
          y: -4.46
        }, {
          x: '2018-12-28',
          y: -4.50

        }, {
          x: '2018-12-31',
          y: -4.50
        }, {
          x: '2019-02-01',
          y: -3.09
        },
        {
          x: '2019-02-08',
          y: -3.24
        }, {
          x: '2019-02-15',
          y: -2.88
        }
      ],
      fill: false
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'TAM Eurosectors Defensiv'
    },
    scales: {
      xAxes: [{
        type: "time",
        time: {
          unit: "year"
        },
        scaleLabel: {
          display: true,
          labelString: '2018 - 2019'
        }
      }]
    }
  }
};

new Chart(document.getElementById("chart"), config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>

Leave a comment