New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Axis with blank ticks shows incorrectly #3082

Open
zmandel opened this Issue Jun 9, 2016 · 2 comments

Comments

Projects
None yet
2 participants
@zmandel

zmandel commented Jun 9, 2016

I have a chart where the X axis value is always a whole number. Thus, I dont want to show numbers that are not whole in the Axis. Sometimes Plottable choses a "0.5" step, and I want to prevent those fractions.

My aproach was to add a formatter to the axis, and return a blank string when the number isnt whole.
However, it doesnt work, some whole numbers get skipped.

var xAxis = new Plottable.Axes.Numeric(xScale, "bottom").formatter(function (num) {
        var strCount = String(num);
        var bWhole = (num % 1 === 0);
        if (bWhole)
            return strCount;
        return ""; //using spaces wont work either
    });

I debugged this and found that in plottable.js 2.0.0 at line 4857, it calls:
while (!this._hasOverlapWithInterval(interval, visibleTickLabelRects) && interval < visibleTickLabelRects.length)

and I can see that the "rects" for all my "hidden" ticks are always with left=right=start of axis.
This causes Numeric.prototype._hasOverlapWithInterval to get confused, thinking that some ticks overlap, and ends up hiding a bunch of correct tickmarks,

Please let me know if my approach is incorrect to hide fractional ticks. I like plottable to chose the right "step", I dont want to add that custom logic, just I want to be able to later either customize that "step" so its always rounded-up, or to hide the fractional tickmarks.

The Chrome extension "Plus for Trello" uses this.

@jtlan

This comment has been minimized.

Contributor

jtlan commented Jun 9, 2016

The correct way to do this is to use a TickGenerator, which specifies the array of values that are even considered for display:

xScale.tickGenerator(Plottable.Scales.TickGenerators.integerTickGenerator());
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");

Hope that helps.

@zmandel

This comment has been minimized.

zmandel commented Jun 10, 2016

awesome! Im using that now.
still seems odd that the rects of those elements are off, couldnt that affect other parts of the code?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment