CODEWITHSUNDEEP
javascriptchartschart.js
the wind
the wind

Reputation: 235

is there a way to change the dispaly of a date

I am using ChartJs library in my application for my charts. At the moment I have a chart showing 31 days of the month but due to a lot of dates, the dates are showing like this:

enter image description here

but I actually need them like this :

enter image description here

Does anyone have any idea about changing the way they are shown, thus that the date is shown below the month or the opposite. Momentally my code looks like this:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: data.map(x => moment(x.date).format("MMM Do")),
        datasets: [{
            data: data.map(x => x.premium),
            backgroundColor: '#ffec87',
            borderColor: "#ffec87",
            borderWidth: 2,
            borderStyle: 'dotted'
        }]
    },
  options: {
    scales: {
      xAxis: { grid: { display: false } },
      yAxis: { grid: { borderDash: [3, 5] } }
    }
  }
});

Upvotes: 0

Views: 58

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31421

You can use multiline labels for that by providing the labbels in an array like so:

var options = {
  type: 'line',
  data: {
    labels: [
      [
        "Red",
        "second line"
      ],
      [
        "Blue",
        "second line"
      ],
      [
        "Yellow",
        "second line"
      ],
      [
        "Green",
        "second line"
      ],
      [
        "Purple",
        "second line"
      ],
      [
        "Orange",
        "second line"
      ]
    ],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

Upvotes: 2

Related Questions