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

Added basic labels to Pie chart #35

Merged
merged 0 commits into from Jun 30, 2014

Conversation

Projects
None yet
@Regaddi

Regaddi commented Mar 20, 2013

Hi!
I implemented some basic labelling to the pie chart, as I missed some labels on it.
The text is rotated with the angle of the pie segment and aligns to the outer edge with a little padding of 10px. It is rendered readable, so no upside down text!

You can style the labels like the following inside the pieData:

    var pieData = [
            {
                value : 30,
                color : "#F38630",
                label : 'Sleep',
                labelColor : 'white',
                labelFontSize : '16'
            },
            ...
        ];

You can choose just any valid css color, like HEX-Codes, RGBs or named colors.

Important to mention: I implemented this as an optional feature, so if you don't need labels, just leave them off. You can also label a segment, while not labelling another and vice versa.

Screenshot from 2013-03-20 09:13:01

@jbrooksuk

This comment has been minimized.

Show comment
Hide comment
@jbrooksuk

jbrooksuk Mar 20, 2013

Contributor

Is labelFontSize able to be defined in px/em etc?

Contributor

jbrooksuk commented Mar 20, 2013

Is labelFontSize able to be defined in px/em etc?

@Regaddi

This comment has been minimized.

Show comment
Hide comment
@Regaddi

Regaddi Mar 20, 2013

It's currently px only, but adding general px/em/% support wouldn't be a neck break.

Regaddi commented Mar 20, 2013

It's currently px only, but adding general px/em/% support wouldn't be a neck break.

@Shuro

This comment has been minimized.

Show comment
Hide comment
@Shuro

Shuro commented Mar 20, 2013

👍

@jakobholmelund

This comment has been minimized.

Show comment
Hide comment
@jakobholmelund

jakobholmelund Mar 22, 2013

Please merge this :) the pia and donught charts are pretty useless without this :)

jakobholmelund commented Mar 22, 2013

Please merge this :) the pia and donught charts are pretty useless without this :)

@Shuro

This comment has been minimized.

Show comment
Hide comment
@Shuro

Shuro Mar 22, 2013

Notice from me: What happens if the pie-piece is too small for the full Text? What then?

Shuro commented Mar 22, 2013

Notice from me: What happens if the pie-piece is too small for the full Text? What then?

@Regaddi

This comment has been minimized.

Show comment
Hide comment
@Regaddi

Regaddi Mar 22, 2013

Currently it will fully disappear, but I'm planning to extend the labelling feature by making the positioning configurable (inside/outside/legend) and implementing mouseover and touch tooltips. Stay tuned!

Regaddi commented Mar 22, 2013

Currently it will fully disappear, but I'm planning to extend the labelling feature by making the positioning configurable (inside/outside/legend) and implementing mouseover and touch tooltips. Stay tuned!

@jakobholmelund

This comment has been minimized.

Show comment
Hide comment
@jakobholmelund

jakobholmelund Mar 22, 2013

Sounds awesome.. :)

On Fri, Mar 22, 2013 at 11:23 PM, Regaddi notifications@github.com wrote:

Currently it will fully disappear, but I'm planning to extend the
labelling feature by making the positioning configurable
(inside/outside/legend) and implementing mouseover and touch tooltips. Stay
tuned!


Reply to this email directly or view it on GitHubhttps://github.com//pull/35#issuecomment-15324446
.

jakobholmelund commented Mar 22, 2013

Sounds awesome.. :)

On Fri, Mar 22, 2013 at 11:23 PM, Regaddi notifications@github.com wrote:

Currently it will fully disappear, but I'm planning to extend the
labelling feature by making the positioning configurable
(inside/outside/legend) and implementing mouseover and touch tooltips. Stay
tuned!


Reply to this email directly or view it on GitHubhttps://github.com//pull/35#issuecomment-15324446
.

@bgSosh

This comment has been minimized.

Show comment
Hide comment
@bgSosh

bgSosh Mar 26, 2013

This is great - the charts without labels are not really very useful. Hope it gets merged soon!

bgSosh commented Mar 26, 2013

This is great - the charts without labels are not really very useful. Hope it gets merged soon!

@billdami

This comment has been minimized.

Show comment
Hide comment
@billdami

billdami Apr 4, 2013

Definitely hopes this gets added! Also, and this may be asking a little too much but in cases where the label cannot fit on the slice (when you have very small and/or alot of slices), that the label appears next to the pie with a line connecting it to the slice. Or, this might be a better solution, have the option to display a legend.

billdami commented Apr 4, 2013

Definitely hopes this gets added! Also, and this may be asking a little too much but in cases where the label cannot fit on the slice (when you have very small and/or alot of slices), that the label appears next to the pie with a line connecting it to the slice. Or, this might be a better solution, have the option to display a legend.

@maxlibin

This comment has been minimized.

Show comment
Hide comment
@maxlibin

maxlibin Apr 16, 2013

can i position the text somewhere center?

maxlibin commented Apr 16, 2013

can i position the text somewhere center?

@Regaddi

This comment has been minimized.

Show comment
Hide comment
@Regaddi

Regaddi Apr 16, 2013

You're now label to align the text for each data segment via labelAlign. You can also specify a global labelAlign in the Pie options.

Two examples:

var pieData = [
    {
        value : 30,
        color : "#F38630",
        label : 'Sleep',
        labelColor : 'white',
        labelFontSize : '10',
        labelAlign : 'left'
    },
    ...
];
var myPie = myChart.Pie(pieData, {
    labelAlign: 'center'
});

Possible values are 'left', 'center' and 'right'.

Regaddi commented Apr 16, 2013

You're now label to align the text for each data segment via labelAlign. You can also specify a global labelAlign in the Pie options.

Two examples:

var pieData = [
    {
        value : 30,
        color : "#F38630",
        label : 'Sleep',
        labelColor : 'white',
        labelFontSize : '10',
        labelAlign : 'left'
    },
    ...
];
var myPie = myChart.Pie(pieData, {
    labelAlign: 'center'
});

Possible values are 'left', 'center' and 'right'.

@rictorres

This comment has been minimized.

Show comment
Hide comment
@rictorres

rictorres Apr 19, 2013

Perfect! Tooltip even supports touch events ;)
Tested on iOS 6.0.1 on iPhone 4.

By the way, add this to prevent the whole <canvas> from being highlighted when touched.

canvas {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Also, consider using FastClick for eliminating 300ms delay between a physical tap and the firing of a click event on mobile browsers.

EDIT: didn't work when using FastClick :(

rictorres commented Apr 19, 2013

Perfect! Tooltip even supports touch events ;)
Tested on iOS 6.0.1 on iPhone 4.

By the way, add this to prevent the whole <canvas> from being highlighted when touched.

canvas {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Also, consider using FastClick for eliminating 300ms delay between a physical tap and the firing of a click event on mobile browsers.

EDIT: didn't work when using FastClick :(

@nguyenj

This comment has been minimized.

Show comment
Hide comment
@nguyenj

nguyenj Apr 24, 2013

Is this in the master branch already? I can't seem to get it to work.

nguyenj commented Apr 24, 2013

Is this in the master branch already? I can't seem to get it to work.

@rictorres

This comment has been minimized.

Show comment
Hide comment
@rictorres

rictorres Apr 24, 2013

I'm afraid not :(
You can use Regaddi's fork

rictorres commented Apr 24, 2013

I'm afraid not :(
You can use Regaddi's fork

@mbuchetics

This comment has been minimized.

Show comment
Hide comment
@mbuchetics

mbuchetics commented Apr 26, 2013

+1

@gdiggs

This comment has been minimized.

Show comment
Hide comment
@gdiggs

gdiggs Apr 28, 2013

+1 this works really well

gdiggs commented Apr 28, 2013

+1 this works really well

@PaigeWagner

This comment has been minimized.

Show comment
Hide comment
@PaigeWagner

PaigeWagner May 3, 2013

"showTooltips : false" isn't working for me...can you help? I want the labels to show, but dont want the tooltips to appear when hovering over the chart. I have tried to remove it on a pie chart and a bar graph. Thanks!

PaigeWagner commented May 3, 2013

"showTooltips : false" isn't working for me...can you help? I want the labels to show, but dont want the tooltips to appear when hovering over the chart. I have tried to remove it on a pie chart and a bar graph. Thanks!

@Regaddi

This comment has been minimized.

Show comment
Hide comment
@Regaddi

Regaddi May 4, 2013

Please open an issue for that at my fork.

Regaddi commented May 4, 2013

Please open an issue for that at my fork.

@kesavanm

This comment has been minimized.

Show comment
Hide comment
@kesavanm

kesavanm Jun 25, 2013

This works really good for me.Thanks

kesavanm commented Jun 25, 2013

This works really good for me.Thanks

@sarxos

This comment has been minimized.

Show comment
Hide comment
@sarxos

sarxos Jun 26, 2013

👍 please merge this!

sarxos commented Jun 26, 2013

👍 please merge this!

@kelmerp

This comment has been minimized.

Show comment
Hide comment
@kelmerp

kelmerp Aug 19, 2013

this is great, thank you!

kelmerp commented Aug 19, 2013

this is great, thank you!

@nibalizer

This comment has been minimized.

Show comment
Hide comment
@nibalizer

nibalizer Aug 28, 2013

+1 Please merge this!

nibalizer commented Aug 28, 2013

+1 Please merge this!

@tonytonyjan

This comment has been minimized.

Show comment
Hide comment
@tonytonyjan

tonytonyjan Sep 12, 2013

+! It's great!

tonytonyjan commented Sep 12, 2013

+! It's great!

@thilohaas

This comment has been minimized.

Show comment
Hide comment
@thilohaas

thilohaas commented Sep 27, 2013

+1

@kimitachi

This comment has been minimized.

Show comment
Hide comment
@kimitachi

kimitachi Sep 30, 2013

+1 for merging this! awesome! 👍

kimitachi commented Sep 30, 2013

+1 for merging this! awesome! 👍

@bpappin

This comment has been minimized.

Show comment
Hide comment
@bpappin

bpappin Oct 3, 2013

This ticket crashes the Chrome tab its opened in.

bpappin commented Oct 3, 2013

This ticket crashes the Chrome tab its opened in.

@nibalizer

This comment has been minimized.

Show comment
Hide comment
@nibalizer

nibalizer Oct 4, 2013

@bpappin I don't see that behavior. I'm using the Pie chart and It doesn't crash. Unfortunately the hover-over doesn't work but the chrome tab doesn't crash.

nibalizer commented Oct 4, 2013

@bpappin I don't see that behavior. I'm using the Pie chart and It doesn't crash. Unfortunately the hover-over doesn't work but the chrome tab doesn't crash.

@bpappin

This comment has been minimized.

Show comment
Hide comment
@bpappin

bpappin Oct 4, 2013

Strange. It took a while to happen after page load, but now I can't reproduce at all.

What was happening was that the content area would become transparent and I'd see the desktop through the space the ticket used to be displayed.
I should have taken a screenshot because it's not happening today!

I'm wondering now if it was just a perfect storm of factors in the browser that caused it, this page being the final nail.

Anyway, never mind, if it happens again I'll try and capture proof. If would most likely be related to a bug int he canvas object.

bpappin commented Oct 4, 2013

Strange. It took a while to happen after page load, but now I can't reproduce at all.

What was happening was that the content area would become transparent and I'd see the desktop through the space the ticket used to be displayed.
I should have taken a screenshot because it's not happening today!

I'm wondering now if it was just a perfect storm of factors in the browser that caused it, this page being the final nail.

Anyway, never mind, if it happens again I'll try and capture proof. If would most likely be related to a bug int he canvas object.

@nibalizer

This comment has been minimized.

Show comment
Hide comment
@nibalizer

nibalizer Oct 4, 2013

@bpappin Do you mean the labels for pie charts caused the crash or that this github page caused a crash?

nibalizer commented Oct 4, 2013

@bpappin Do you mean the labels for pie charts caused the crash or that this github page caused a crash?

@MartinSeeler

This comment has been minimized.

Show comment
Hide comment
@MartinSeeler

MartinSeeler Mar 7, 2014

👍 This works perfectly

MartinSeeler commented Mar 7, 2014

👍 This works perfectly

@hutber

This comment has been minimized.

Show comment
Hide comment
@hutber

hutber Mar 9, 2014

How the heck do I pull this thing man :) Why do they make it confusing? I'd argue I don't know how, you'd be right. But I would say that good UI means I shouldn't have to work it out or ask!

So anyway, how do I get a copy of this fork :D

hutber commented Mar 9, 2014

How the heck do I pull this thing man :) Why do they make it confusing? I'd argue I don't know how, you'd be right. But I would say that good UI means I shouldn't have to work it out or ask!

So anyway, how do I get a copy of this fork :D

@jamime

This comment has been minimized.

Show comment
Hide comment
@jamime

jamime Mar 9, 2014

@jamiehutber git clone https://github.com/Regaddi/Chart.js.git ?

jamime commented Mar 9, 2014

@jamiehutber git clone https://github.com/Regaddi/Chart.js.git ?

@hutber

This comment has been minimized.

Show comment
Hide comment
@hutber

hutber Mar 9, 2014

That would probably do it ;) Wonder how you worked that :O cheers mate

Next step is now getting this to work with doughtnut chart! Still, when I need a pie chart I'll be pleased.

hutber commented Mar 9, 2014

That would probably do it ;) Wonder how you worked that :O cheers mate

Next step is now getting this to work with doughtnut chart! Still, when I need a pie chart I'll be pleased.

@dorafmon

This comment has been minimized.

Show comment
Hide comment
@dorafmon

dorafmon Mar 11, 2014

Pleases merge this :)

dorafmon commented Mar 11, 2014

Pleases merge this :)

@sakulstra

This comment has been minimized.

Show comment
Hide comment
@sakulstra

sakulstra Mar 12, 2014

@nnnick 's chart.js isn't maintained any more(at least for the last 8 months). So it's probably better to PR/issue a maintained fork. For example this one seems promising https://github.com/FVANCOP/ChartNew.js (3contributors which already work on merging forks from here)

sakulstra commented Mar 12, 2014

@nnnick 's chart.js isn't maintained any more(at least for the last 8 months). So it's probably better to PR/issue a maintained fork. For example this one seems promising https://github.com/FVANCOP/ChartNew.js (3contributors which already work on merging forks from here)

@hellzapop

This comment has been minimized.

Show comment
Hide comment
@hellzapop

hellzapop Mar 24, 2014

great job man!! :)

hellzapop commented Mar 24, 2014

great job man!! :)

@hhsissi

This comment has been minimized.

Show comment
Hide comment
@hhsissi

hhsissi Mar 26, 2014

Exactly what i was missing, thanks a lot! =)

hhsissi commented Mar 26, 2014

Exactly what i was missing, thanks a lot! =)

@ryanchang

This comment has been minimized.

Show comment
Hide comment
@ryanchang

ryanchang commented Apr 16, 2014

👍

@evilaliv3

This comment has been minimized.

Show comment
Hide comment
@evilaliv3

evilaliv3 commented Apr 28, 2014

👍

@bgallagh3r

This comment has been minimized.

Show comment
Hide comment
@bgallagh3r

bgallagh3r May 4, 2014

It sucks that they likely wont pull this because they have noted they are doing a massive overhaul on the chart.js core. But hooray for this so far. Awesome work!

bgallagh3r commented May 4, 2014

It sucks that they likely wont pull this because they have noted they are doing a massive overhaul on the chart.js core. But hooray for this so far. Awesome work!

@pwwang

This comment has been minimized.

Show comment
Hide comment
@pwwang

pwwang Jun 11, 2014

Why it's not added into docs?

pwwang commented Jun 11, 2014

Why it's not added into docs?

@FVANCOP

This comment has been minimized.

Show comment
Hide comment
@FVANCOP

FVANCOP Jun 15, 2014

Unfortunately this version is no more maintained and those changes will probably never be added in official version.

We have developped an alternative version ( https://github.com/FVANCOP/ChartNew.js is down compatible with Nick's version) where those things have been integrated and there are even more possibilities for displaying labels in pie charts (but also for all other charts).

Take a look at the documentation https://github.com/FVANCOP/ChartNew.js/wiki/100_080_In_Graph_Data

FVANCOP commented Jun 15, 2014

Unfortunately this version is no more maintained and those changes will probably never be added in official version.

We have developped an alternative version ( https://github.com/FVANCOP/ChartNew.js is down compatible with Nick's version) where those things have been integrated and there are even more possibilities for displaying labels in pie charts (but also for all other charts).

Take a look at the documentation https://github.com/FVANCOP/ChartNew.js/wiki/100_080_In_Graph_Data

@abyr

This comment has been minimized.

Show comment
Hide comment
@abyr

abyr Jun 21, 2014

👍 thanks

abyr commented Jun 21, 2014

👍 thanks

@nnnick nnnick merged commit f13f99b into chartjs:master Jun 30, 2014

@jatinkashyap

This comment has been minimized.

Show comment
Hide comment
@jatinkashyap

jatinkashyap Jul 15, 2014

Please discuss about Export to PDF functionality

jatinkashyap commented Jul 15, 2014

Please discuss about Export to PDF functionality

@nicholaswmin

This comment has been minimized.

Show comment
Hide comment
@nicholaswmin

nicholaswmin Sep 1, 2014

Hi, are tooltips implemented in Regaddis original version?

I can't seem to get the tooltips working in the branch that places labels on the charts. Which branch is it?

nicholaswmin commented Sep 1, 2014

Hi, are tooltips implemented in Regaddis original version?

I can't seem to get the tooltips working in the branch that places labels on the charts. Which branch is it?

@FrankFang

This comment has been minimized.

Show comment
Hide comment
@FrankFang

FrankFang Sep 26, 2014

Does 1.0.1-beta.4 support this feature?
It does not work for me. :(

FrankFang commented Sep 26, 2014

Does 1.0.1-beta.4 support this feature?
It does not work for me. :(

@guyzi

This comment has been minimized.

Show comment
Hide comment
@guyzi

guyzi Oct 22, 2014

Notice that oddly enough 0 commits were merged in this "merged pul request" so that's confusing, but no its not in the official Chart.js

guyzi commented Oct 22, 2014

Notice that oddly enough 0 commits were merged in this "merged pul request" so that's confusing, but no its not in the official Chart.js

@luisrudge

This comment has been minimized.

Show comment
Hide comment
@luisrudge

luisrudge Nov 24, 2014

whaaaaaaaaaaat. please add this :)

luisrudge commented Nov 24, 2014

whaaaaaaaaaaat. please add this :)

@bndr

This comment has been minimized.

Show comment
Hide comment
@bndr

bndr Jan 14, 2015

Why was this closed, when none of the features were merged?

bndr commented Jan 14, 2015

Why was this closed, when none of the features were merged?

@tiesont

This comment has been minimized.

Show comment
Hide comment
@tiesont

tiesont Jan 15, 2015

Contributor

@bndr Probably because it was based on the 0.2.0 version, given it's original request date.

Contributor

tiesont commented Jan 15, 2015

@bndr Probably because it was based on the 0.2.0 version, given it's original request date.

@joshbedo

This comment has been minimized.

Show comment
Hide comment
@joshbedo

joshbedo Jun 13, 2015

We definitely need to get this in! I'm pretty sure it's something everybody wants.

joshbedo commented Jun 13, 2015

We definitely need to get this in! I'm pretty sure it's something everybody wants.

@kiquenet

This comment has been minimized.

Show comment
Hide comment
@kiquenet

kiquenet Jun 19, 2015

chartjs no more manteined ?? It's a very sad news.

Which is the alternative ? https://github.com/FVANCOP/ChartNew.js/wiki/030_History ?

kiquenet commented Jun 19, 2015

chartjs no more manteined ?? It's a very sad news.

Which is the alternative ? https://github.com/FVANCOP/ChartNew.js/wiki/030_History ?

@tannerlinsley

This comment has been minimized.

Show comment
Hide comment
@tannerlinsley

tannerlinsley Jun 19, 2015

Member

@kiquenet Chart.js is being maintained and 2.0 is being rigorously prepped for beta release. Please check out the v2.0-dev branch for a preview!

(We appreciate the concern :)

Member

tannerlinsley commented Jun 19, 2015

@kiquenet Chart.js is being maintained and 2.0 is being rigorously prepped for beta release. Please check out the v2.0-dev branch for a preview!

(We appreciate the concern :)

@riblee

This comment has been minimized.

Show comment
Hide comment
@riblee

riblee commented Jul 20, 2015

+1

@tarun-nagpal-github

This comment has been minimized.

Show comment
Hide comment
@tarun-nagpal-github

tarun-nagpal-github Aug 18, 2015

Can you please tell me guys where to add it.

var pieData = [
{
value : 30,
color : "#F38630",
label : 'Sleep',
labelColor : 'white',
labelFontSize : '16'
},
...
];

In the custom JS i am using or in the chartjs min file. ?

tarun-nagpal-github commented Aug 18, 2015

Can you please tell me guys where to add it.

var pieData = [
{
value : 30,
color : "#F38630",
label : 'Sleep',
labelColor : 'white',
labelFontSize : '16'
},
...
];

In the custom JS i am using or in the chartjs min file. ?

@pixelbyaj

This comment has been minimized.

Show comment
Hide comment
@pixelbyaj

pixelbyaj Oct 14, 2015

Hello @Regaddi , @tannerlinsley && @nnnick are going to get this labeling features in V 2.0 ?

pixelbyaj commented Oct 14, 2015

Hello @Regaddi , @tannerlinsley && @nnnick are going to get this labeling features in V 2.0 ?

@DaeDeLeon

This comment has been minimized.

Show comment
Hide comment
@DaeDeLeon

DaeDeLeon Oct 29, 2015

Still having trouble with this, i want display % values within each section of a doughnut chart whilst also maintaining the tool tips, which i'm also having trouble styling. I've found many solutions here and on stacked but every time i add code to the Chart.js file my chart just vanishes. Admittedly my JS skills are pretty basic and i'm guessing i'm not putting code into the right place. Any 'Idiot Proof' advice would be very much appreciated.

DaeDeLeon commented Oct 29, 2015

Still having trouble with this, i want display % values within each section of a doughnut chart whilst also maintaining the tool tips, which i'm also having trouble styling. I've found many solutions here and on stacked but every time i add code to the Chart.js file my chart just vanishes. Admittedly my JS skills are pretty basic and i'm guessing i'm not putting code into the right place. Any 'Idiot Proof' advice would be very much appreciated.

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