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] Fill didn't start from zeroLine in mixed lines/bar chart

See original GitHub issue

Expected Behavior

There are two lines and a bar in a mixed type chart, I want to fill space between these two lines,

new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [
            {...} ,           // this is a bar
            {fill: '+1'},      // this is a line
            {fill: false},      // this is another line
        ]
    }
})

but I found the fill didn’t start from index zero,

But in a lines only chart, the fill worked as expected, starting from index 0. Just removed bar from above demo

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Environment

  • Chart.js version: 2.6
  • Browser name and version: Ionic (WebView)
  • Link to your project:

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
nagixcommented, Aug 26, 2017

I think this is not a bug, and the behavior of a line-only chart has changed by #4545 so that a line starts from the midpoint of grid lines with or without bars. There are no options to simply extend these lines.

As a workaround, you can add extra columns at the beginning and end, and use ticks.min and ticks.max options. By the way, 2.6 has an issue about fill area clipping (#4450), so you need the version from the latest master.

See https://jsfiddle.net/zkr59bfx/

0reactions
nagixcommented, Aug 25, 2017

@qiluo This seems a bug in the filler plugin. I opend #4696.

Read more comments on GitHub >

github_iconTop Results From Across the Web

A Line chart may plot gaps in lines when the data range ...
Click your Line chart to start it. On the Tools menu, click Options. On the Chart tab, click Interpolated, and then click OK....
Read more >
Chart.js mixed chart : Lines not starting at zero - Stack Overflow
In this case, that means that the default options for a bar chart are merged because that is the type specified by the...
Read more >
Force a column, bar, or line chart in Excel to start at zero
Excel changes the starting value for the measurement axis of column, bar, and line charts based on the values being graphed.
Read more >
Floating Bars in Excel Charts - Peltier Tech
In a Gantt chart, horizontal floating bars along a horizontal date scale help program managers plan task start and end dates and durations, ......
Read more >
Bar charts should always start at zero. But what about line ...
And, indeed, there's some preliminary empirical evidence to back up the idea that truncating the axis is a problem on line charts, too....
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