question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] bar charts scales are inconsistent when type: 'time' and unit: 'week' OR 'month'

See original GitHub issue

Expected Behavior

I expected the graph chart to remain consistent, and for only the xAxis time format to change.

Current Behavior

The xAxis scale seems to increase too much, and data is lost in both the week and month (more than week) charts. Clumping the bars together as a week or month metric seems to be the root of the problem.

Possible Solution

I suggest that when bar charts (stacked, or not) have type: 'time' configured, display the bars as days, keeping the chart graph itself consistent, and only change the axis labeling (days, weeks, months).

We need to ask ourselves if we think this is working as intended or not. Here are my opinions

Leaving it the way it is (clumping up data by week/month)

Pros: ??

Cons

  1. truth of the original data is altered
  2. some data will be hidden/truncated (bad!)
  3. stacking bar charts seems to exacerbate the previous 2 problems
Making a special case for bar charts with the ‘time’ configuration always display the chart in day bars

Pros:

  1. we avoid all the Cons of leaving it the way it is

Cons:

  1. We break convention, adding a special case to one of the chart types, possibly breaking backwards compatibility

Maybe we can avoid the last con by adding another configuration option that gives us the ability to be flexible with how we want the chart to render.

Steps to Reproduce (for bugs)

  1. Look at my demos
  2. Compare the data in the graph vs all 3 types of time units (day, week, month)
  3. Assert the data does not stay consistent, is often truncated on the right-hand-side, and could be avoided if bar charts only used days for bars rather than attempting to clump weeks and months together somehow.

Context

I’m trying to represent data with a clear bar chart, provide 3 options for the xAxis scale labels (days, weeks, months).

Environment

  • Chart.js version: 2.4.0
  • Browser name and version: Any
  • Link to your projects:

Bar Chart (stacked)

https://jsfiddle.net/5y0rk63a/

This demo shows a big difference in the way the chart is rendered when the scale unit differs.

Bar Chart

https://jsfiddle.net/5y0rk63a/1/

This demo is fork of the stacked bar chart, with hopes to further isolate the root cause. It contains a single dataset, and does not stack any bar data.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
nagixcommented, Jun 26, 2018

I verified that this was fixed in 2.7.2. Regarding the x axis label issue, use the formats supported by moment.js. For example, ‘2018-1-22 0:0’ is not supported, but ‘2018-01-22 00:00’ is.

0reactions
etimbergcommented, Jan 22, 2018

Ah cool, forgot that #4994 is in 2.7.2. Once that’s released I think this can be closed 😄

Read more comments on GitHub >

github_iconTop Results From Across the Web

Excel axis shows wrong date- start of month or large gaps in ...
00:00 Dates missing or large gaps in Excel axis of chart 00:23 Show the missing dates on chart 00:58 Remove the gaps between...
Read more >
Chart.js - mixed chart types (line/bar) on time scale causing ...
I'm using chart.js in my project where I'm having a daily-ticked time scale on the X axis and two linear scales on the...
Read more >
Range and scale on visual types in QuickSight
Change the range and scale of a visual in Amazon QuickSight. ... This option is available for the value axes on bar charts,...
Read more >
Dates are made consecutive when you create charts in ...
To do this, follow these steps: Right-click the axis that you want to change, and then click Format Axis. In the Format Axis...
Read more >
A Complete Guide to Line Charts | Tutorial by Chartio
Line charts are a fundamental chart type generally used to show change in values ... generating an observation every minute, hour, day, week,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found