Generate a big X Axis

1

Hi,
I’m developing a chart maker that adds a record every day and posts it to a Telegram channel. The problem is that right now the letters and bars fit perfectly horizontally, but someday they won’t. Would it be possible that one day you would implement a filter by days, months and years or that quickchart would generate an interactive graph instead of an image?

The chart right now: https://quickchart.io/chart/render/zf-dc2e7bc8-ed85-42de-9c73-7063f7e09e12

And if you hadn’t thought of that implementation, what would be the best way to add (for example) 600 records on the x-axis and make the points visible?

Thanks

2

Hi @wolfcat90,

It’s possible to implement a filter on days, weeks, months, etc. as you wish.

X axis ticks

To control ticks on the X axis, set ticks.autoSkip to true. You can also control the maximum number of ticks displayed by setting ticks.maxTicksLimit. For example:

  options: {
    scales: {
      xAxes: [
        {
          ticks: {
            autoSkip: true,
            maxTicksLimit: 20,
          },
        },
      ],
    },

Refer to the docs on Tick Configuration options for further information.

Datalabels ticks

For data labels, you can control which ones appear by setting the datalabels.display attribute. This can be a function that dynamically determines visibility. For example, here we’ll display only every other tick, ensuring that there are enough space:

  options: {
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'top',
        formatter: function (value) {
          return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        },
        display: (context) => context.dataIndex % 2 === 0,
      },
    },
  },

You can also just set display: 'auto' and it will hide the label if it overlaps with another label.

Refer to the chartjs-plugin-datalabels docs for further information.

Putting it all together

Here’s a modified chart config based on your original config.

3

Wow! That looks awesome!
But you said I can implement a filter, How? That would be incredibly useful for me.

4

For X axis ticks, you can add logic to ticks.userCallback. For example, this will display every other tick:

      xAxes: [
        {
          ticks: {
            userCallback: (item, index) => index % 2 === 0 ? item : '',
          },
        },
      ],

You can apply arbitrary logic. For example, this will show only ticks where the day of the month is greater than 15:

      xAxes: [
        {
          ticks: {
            userCallback: (item, index) => new Date(item).getDate() > 15 ? item : '',
          },
        },
      ],

To script datalabels ticks, add logic to datalabels.display as indicated in the previous post.

Hope this helps!