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

showXLabels - Option to display specified number of labels on X-Axis #521

Closed
wants to merge 6 commits into
base: master
from

Conversation

@hay-wire
Copy link

hay-wire commented Aug 6, 2014

Update : Refer updated PR here: #897


Original :

Applicable to bar chart and line chart.

User can now pass a { showXLabels: 10 } to display only 10 labels (actual displayed labels count might be a bit different depending on the number of total labels present on x axis, but it will still remain close to 10 however)

Helps a lot when there is a very large amount of data. Earlier, the graph used to look devastated due to x axis labels drawn over each other in the cramped space. With showXLabels, user now has the control to reduce the number of labels to whatever number of labels fit good into the space available to him.

Please see the attached images for a comparison. the second graph has been passed { showXLabels: 10 } into option.

err-graph
great-graph

hay-wire added some commits Aug 6, 2014

Added skipXLabels option to line Chart and Bar chart.
Chart.Core.js has been edited  so, this option is available to any other chart as well if anybody wants to extend this feature.

@hay-wire hay-wire changed the title skipXLabels - Option to display specified number of labels on X-Axis showXLabels - Option to display specified number of labels on X-Axis Aug 6, 2014

@vicngtor

This comment has been minimized.

Copy link

vicngtor commented Sep 9, 2014

This is pretty neat. Can we get this in?

@cstegner

This comment has been minimized.

Copy link

cstegner commented Sep 19, 2014

+1

10 similar comments
@tonyghita

This comment has been minimized.

Copy link

tonyghita commented Sep 19, 2014

+1

@Tropicalista

This comment has been minimized.

Copy link

Tropicalista commented Sep 28, 2014

+1

@duduribeiro

This comment has been minimized.

Copy link

duduribeiro commented Sep 29, 2014

👍

@Pathel

This comment has been minimized.

Copy link

Pathel commented Oct 7, 2014

+1

@nickfrandsen

This comment has been minimized.

Copy link

nickfrandsen commented Oct 8, 2014

+1

@azapps

This comment has been minimized.

Copy link

azapps commented Oct 12, 2014

+1

@GabiGrin

This comment has been minimized.

Copy link

GabiGrin commented Oct 14, 2014

+1

@cccrish

This comment has been minimized.

Copy link

cccrish commented Oct 16, 2014

+1

@megazyz

This comment has been minimized.

Copy link

megazyz commented Oct 25, 2014

+1

@UltimateBrent

This comment has been minimized.

Copy link

UltimateBrent commented Nov 6, 2014

+1

@spacemanjosh

This comment has been minimized.

Copy link

spacemanjosh commented Nov 7, 2014

+1 This would be extremely useful.

@fendrychl

This comment has been minimized.

Copy link

fendrychl commented Nov 7, 2014

+1

2 similar comments
@yntelectual

This comment has been minimized.

Copy link

yntelectual commented Nov 18, 2014

+1

@roello

This comment has been minimized.

Copy link

roello commented Nov 18, 2014

+1

@taylanpince

This comment has been minimized.

Copy link

taylanpince commented Nov 18, 2014

If it wasn't for this fork, I was gonna have to find an alternative to Chart.js. This is a critical feature. +1

@hay-wire

This comment has been minimized.

Copy link
Author

hay-wire commented Nov 23, 2014

Glad it helped so many of us :)
I think its high time to fix label rotation as well. Would see if I can try nnick's way as well. God give me some time =)

@baires

This comment has been minimized.

Copy link

baires commented Nov 26, 2014

👍

2 similar comments
@binary1230

This comment has been minimized.

Copy link

binary1230 commented Nov 28, 2014

+1

@Darkeye9

This comment has been minimized.

Copy link

Darkeye9 commented Dec 8, 2014

+1

@jfi

This comment has been minimized.

Copy link

jfi commented Dec 9, 2014

+1, does exactly what we need.

@tannerlinsley

This comment has been minimized.

Copy link
Member

tannerlinsley commented Dec 10, 2014

+1 This would be great to have asap. It would be super helpful to have it default to 'auto' that would just kill labels as they get to cramped, keeping things responsive.

@derekperkins

This comment has been minimized.

Copy link
Member

derekperkins commented Dec 11, 2014

@hay-wire Can you update this PR, resolve the merge conflicts and squash your commits so @nnnick can easily accept it?

@brenotx

This comment has been minimized.

Copy link

brenotx commented Apr 23, 2015

+1

@cklemming

This comment has been minimized.

Copy link

cklemming commented Jun 26, 2015

+1!

@derekperkins

This comment has been minimized.

Copy link
Member

derekperkins commented Jun 26, 2015

Have you checked out 2.0 yet?

@gibolocopt

This comment has been minimized.

Copy link

gibolocopt commented Jul 3, 2015

+1

6 similar comments
@jomeier

This comment has been minimized.

Copy link

jomeier commented Jul 27, 2015

+1

@DevillersJerome

This comment has been minimized.

Copy link

DevillersJerome commented Jul 29, 2015

+1

@EUA

This comment has been minimized.

Copy link

EUA commented Aug 21, 2015

+1

@BastianVoigt

This comment has been minimized.

Copy link

BastianVoigt commented Oct 5, 2015

+1

@javierbyte

This comment has been minimized.

Copy link

javierbyte commented Oct 13, 2015

+1

@fbukevin

This comment has been minimized.

Copy link

fbukevin commented Dec 31, 2015

+1

@stmswitcher

This comment has been minimized.

Copy link

stmswitcher commented Jan 31, 2016

+1

2 similar comments
@PixelAtLarge

This comment has been minimized.

Copy link

PixelAtLarge commented Feb 5, 2016

+1

@dnascimento

This comment has been minimized.

Copy link

dnascimento commented Feb 6, 2016

+1

@thowmas

This comment has been minimized.

Copy link

thowmas commented Feb 6, 2016

This message was created automatically by mail delivery software.

A message that you sent could not be delivered to one or more of its
recipients. This is a temporary error. The following address(es) deferred:

thnghm@gmail.com
Domain typeshape.com has exceeded the max emails per hour (1/1 (100%)) allowed. Message will be reattempted later

------- This is a copy of the message, including all the headers. ------
Received: from github-smtp2-ext4.iad.github.net ([192.30.252.195]:56222 helo=github-smtp2a-ext-cp1-prd.iad.github.net)
by whm01.mammoth.net.au with esmtps (TLSv1.2:ECDHE-RSA-AES256-GCM-SHA384:256)
(Exim 4.86)
(envelope-from noreply@github.com)
id 1aS719-002gK3-ME
for tom@typeshape.com; Sun, 07 Feb 2016 04:51:37 +1100
Date: Sat, 06 Feb 2016 09:50:47 -0800
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=github.com;
s=pf2014; t=1454781047;
bh=vRYWupuRaYkWQbmp9H6lKBDCZsqdytFjZ7hPIA8OQfw=;
h=From:Reply-To:To:In-Reply-To:References:Subject:List-ID:
List-Archive:List-Post:List-Unsubscribe:From;
b=y7Gem1fXMHuvj3QXD3HB7AhggO/ovrQ6GF/Buh+ZcoxG7wh/QgUKEioMltEpJEvJw
mSuBqBaHI6rGoUA6Sztyk/4Sr1FykzQs4GOT3oVybkv4RlokGpj2fEPbanXYiOGm4U
v5Ec8kysDkN8VSfk1Mqx12Ps1A/9Y+rCoE+/zR10=
From: Dário Nascimento notifications@github.com
Reply-To: "nnnick/Chart.js" reply@reply.github.com
To: "nnnick/Chart.js" Chart.js@noreply.github.com
Message-ID: nnnick/Chart.js/pull/521/c180820059@github.com
In-Reply-To: nnnick/Chart.js/pull/521@github.com
References: nnnick/Chart.js/pull/521@github.com
Subject: Re: [Chart.js] showXLabels - Option to display specified number of
labels on X-Axis (#521)
Mime-Version: 1.0
Content-Type: multipart/alternative;
boundary="--==_mimepart_56b63277e55be_46b93fdc2a9d12a01107d1";
charset=UTF-8
Content-Transfer-Encoding: 7bit
Precedence: list
X-GitHub-Sender: dnascimento
X-GitHub-Recipient: thowmas
List-ID: nnnick/Chart.js <Chart.js.nnnick.github.com>
List-Archive: https://github.com/nnnick/Chart.js
List-Post: mailto:reply@reply.github.com
List-Unsubscribe: mailto:unsub+000ccf017dbd514a1a8c98f79b234327e52d8c358a8fca1092cf0000000112cdf47792a169ce025c4574@reply.github.com,
https://github.com/notifications/unsubscribe/AAzPAczwU1ieFjsviddELn703Aak0KiLks5phin3gaJpZM4CUjc-
X-Auto-Response-Suppress: All
X-GitHub-Recipient-Address: tom@typeshape.com
X-Spam-Status: No, score=-5.4
X-Spam-Score: -53
X-Spam-Bar: -----
X-Ham-Report: Spam detection software, running on the system "whm01.mammoth.net.au",
has NOT identified this incoming email as spam. The original
message has been attached to this so you can view it or label
similar future email. If you have any questions, see
root@localhost for details.

Content preview: +1 --- Reply to this email directly or view it on GitHub:
#521 (comment) +1 [...]

Content analysis details: (-5.4 points, 5.0 required)

pts rule name description


-5.0 RCVD_IN_DNSWL_HI RBL: Sender listed at http://www.dnswl.org/, high
trust
[192.30.252.195 listed in list.dnswl.org]
-0.0 RCVD_IN_MSPIKE_H3 RBL: Good reputation (+3)
[192.30.252.195 listed in wl.mailspike.net]
-0.0 SPF_PASS SPF: sender matches SPF record
-1.9 BAYES_00 BODY: Bayes spam probability is 0 to 1%
[score: 0.0000]
0.0 HTML_MESSAGE BODY: HTML included in message
1.7 HTML_IMAGE_ONLY_08 BODY: HTML: images with 400-800 bytes of words
-0.1 DKIM_VALID_AU Message has a valid DKIM or DK signature from author's
domain
0.1 DKIM_SIGNED Message has a DKIM or DK signature, not necessarily valid
-0.1 DKIM_VALID Message has at least one valid DKIM or DK signature
-0.0 RCVD_IN_MSPIKE_WL Mailspike good senders
X-Spam-Flag: NO

----==_mimepart_56b63277e55be_46b93fdc2a9d12a01107d1
Content-Type: text/plain;
charset=UTF-8
Content-Transfer-Encoding: 7bit

+1


Reply to this email directly or view it on GitHub:
#521 (comment)
----==_mimepart_56b63277e55be_46b93fdc2a9d12a01107d1
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: 7bit

+1


Reply to this email directly or view it on GitHub.

----==_mimepart_56b63277e55be_46b93fdc2a9d12a01107d1--

@DanielePalombo

This comment has been minimized.

Copy link

DanielePalombo commented Feb 10, 2016

+1

2 similar comments
@Sauloxd

This comment has been minimized.

Copy link

Sauloxd commented Feb 12, 2016

+1

@VencaV

This comment has been minimized.

Copy link

VencaV commented Feb 22, 2016

+1

@ranstyr ranstyr referenced this pull request Mar 2, 2016

Closed

xScaleOverride doesnt work #39

@brettdaman

This comment has been minimized.

Copy link

brettdaman commented Mar 10, 2016

+1 The xScaleOverride option requires additional logic to calculate (xScaleStartValue, xScaleStepWidth) that should be handled in the chart.js

@alexbeletsky

This comment has been minimized.

Copy link

alexbeletsky commented Mar 24, 2016

It's neither merged for a 2 year, nor solution proposed. What's the workaround for that issue?

@chrisvel

This comment has been minimized.

Copy link

chrisvel commented Mar 28, 2016

+1

@fechnert

This comment has been minimized.

Copy link

fechnert commented Apr 5, 2016

@alexbeletsky would be nice if there was a way to do it, or simply a comment about the state of this ...

@briankip

This comment has been minimized.

Copy link

briankip commented Apr 5, 2016

Guys just use highcharts like I did, and please for the love of God no more +1 comments

@alexbeletsky

This comment has been minimized.

Copy link

alexbeletsky commented Apr 5, 2016

@HWDexperte As far as I understood, this will never be merged. Instead, in v2.0.0-beta they have auto-skip option that solves the problem somehow.

http://nnnick.github.io/Chart.js/docs-v2/

Meanwhile, I ended up by just using empty labels, where I don't need them (I render some calendar-based data, so skip every 3 days). I read some critics about it, but it works fine, and it's good enough for me.

@briankip +1 are nice, it shows the interest of the community to a particular issue. Reactions introduced not that long time ago. See no reason, not use it.

@etimberg

This comment has been minimized.

Copy link
Member

etimberg commented Apr 5, 2016

@alexbeletsky @HWDexperte V2 does have an auto-skip option. It will remove labels when they get too crowded.

At the same time, you can disable the auto-skipper and manually filter labels. The labels on each axis are run through a callback. If you return an empty string from the callback the grid-line will still show but there will be no text. If you return null, the grid line will be hidden.

I've created a fiddle from the relevant v2 sample at https://jsfiddle.net/1zobrr4j/6/
It is set up to make every 2nd label an empty string.

If you want to remove the grid lines from the hidden labels, you can change the callback to

callback: function(dataLabel, index) {
    return index % 2 === 0 ? dataLabel : null;
}
@ihorml

This comment has been minimized.

Copy link

ihorml commented Apr 5, 2016

@briankip thx man. It looks really nice. Will try it.

@ricohumme

This comment has been minimized.

Copy link

ricohumme commented Apr 26, 2016

This works like a charm. Perfect!

@lsimmons2

This comment has been minimized.

Copy link

lsimmons2 commented Oct 20, 2016

@etimberg Is there a way to use your callback solution to filter labels on the axis while still showing the labels in each tooltip? I'm usingangular-chart.js if it matters. Thanks!

@oneberenjena

This comment has been minimized.

Copy link

oneberenjena commented Feb 14, 2018

This is an excellent solution. I'm showing this in mobile environment so it's a must to have this skipping. I would like to remove the x-axis label vertical line (the little one coming from the horizontal axis that divides each step) when there's no label to show (this might be some css to modify), but I don't know where to start looking. Any ideas?

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