Skip to content

Re-ordering y-axis time day begins #7534

@ragaeeb

Description

@ragaeeb

👋 hello there! I have a special use-case and I'm wondering if chartjs supports this.

I have the following graph I generated in chartjs using:

const buildDataSet = (label) => {
  const color = stringToColour(label);

  return {
    label,
    fill: false,
    lineTension: 0.1,
    backgroundColor: color,
    borderColor: color,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    pointBorderColor: color,
    pointBackgroundColor: '#fff',
    pointBorderWidth: 1,
    pointHoverRadius: 5,
    pointHoverBackgroundColor: color,
    pointHoverBorderColor: 'rgba(220,220,220,1)',
    pointHoverBorderWidth: 2,
    pointRadius: 1,
    pointHitRadius: 10,
  };
};

      <Line
        data={data}
        options={{
          scales: {
            yAxes: [
              {
                distribution: 'series',
                type: 'time',
                time: {
                  unit: 'minute',
                },
                ticks: {
                  source: 'auto',
                },
              },
            ],
          },
        }}
      />

The y-axis are a plot of Date objects.

Screen Shot 2020-06-20 at 3 55 56 PM

As you can see, there is a big dip in the sections of the graph where the timing > 11:59pm, and it dips all the way to the bottom of the graph, since 12:00am starts at the bottom. This messes up the visualization of the graph. As a result I'd like to reorder the y-axis, such that the day starts at let's say 3:00am instead of 12:00am. So I would like the very bottom of the y-axis start at 3:00am instead.

Is this possible to do?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions