Adding simple label to slices of pie chart

[mukiwu]

can I add some text to the chart pie??
I don't see any text api in the document

[gionkunz]

Hi mukiwu

Currently not, I'm sorry. The current version expects you to create your own legend with labels. As long as it stays simple labeling of the slices I'd be okay to implement this in chartist. I just don't want to include to generate a legend. I'll rename your issue and flag it as enhancement.

Thanks for your feedback.

Cheers
Gion

[gionkunz]

The default position of the labels should be on half distance from center point to the circumference of the circle or the line of the donut / gouge chart. Then an offset configuration parameter could be used to indicate negative or positive offset from this position where the label will be positioned closer to the center or more far away (even outside the chart in conjunction with the chartPadding parameter)

Anyone please comment if you have other ideas.

[dsbudiac]

Hi Gion,

Definitely agree on your default/offset label position thoughts. However, sometimes pie segments are too small to allow room for a label. In which case, it may make sense to either:

1. hide the label completely for that segment, or
2. instead, create a pointer-like label that sits outside the pie circle for that segment (example: http://www.highcharts.com/demo/pie-basic)

Also, as the window/chart is resized, each pie segment may no longer have enough space to display the label on top of itself... unless the text bleeds over partially to other segments, and that usually looks ugly/sloppy IMHO. So default label displays will need to be recalculated on resize... probably in a similar manner to which your examples use the responsiveOptions param.

And finally, it'd be nice to vary label text size based on segment size. (i.e. larger segments get larger labels). Though that might be better served as an advanced/customizable feature, rather than the default.

-david

P.S. Awesome work w/ chartist.js thus far! Definitely the best core charting lib I've come across. I'm already working to include in production on one of my projects. I totally agree w/ your philosophy in that elements like chart titles and legends should be handled in HTML (rather than in .svg by the charting library).

[gionkunz]

Great thoughts, and nice to see others think the same way about libraries should focus more on core problems rather than trying to provide everything (that will most likely result into the situation where you cant use anything the way you want).

I hope to get some good issues from your production excercise attempts with chartist :-)

I'll use your ideas and feedback when i start working on a feature branch regarding this.

I think with the following params we can address most of the concerns while keep everything simple:

• labelOffset (blue line, could also be negative)
• chartPadding (purple)
• font size (regular inherited css, i doubt that it will look nice if the font size is different per slice)
• responsive options and using interpolation function similar to labelInterpolationFnc for series names
• labelOverflow (defaults to true, if false will hide individual slice labels if there is no space)

Lets collect more ideas. I hope to find time this weekend to start a branch so we can go from there.

Cheers
Gion

[aml987]

Please, add an option that allow us to display what every color means, like this img:

[dsbudiac]

@aml987 you can already add a legend yourself. Here's a rough example: http://jsfiddle.net/zetzt9gu/

IMO, handling text inside SVG's is a pain, and should be kept to a minimum. Legends, titles, etc. are much better handled w/ plain old html/css.

@gionkunz you'll probably get a ton of requests to add legends to the library. It might make sense to include info on how to build your own legend in the doc's.

[dsbudiac]

@gionkunz I think your notes are right on... However, I've noticed a common pitfall with other chart libraries: occasionally some pie chart labels would get cutoff (similar to a box element overflow:hidden;)... you might have to take segment label sizes into account for proper sizing/padding.

[aml987]

@dsbudiac thanks but, it's appear without legend. Where is my mistake???

[aml987]

this is code of pie.css:

 $ct-series-colors: (#d70206, #F05B4F, #F4C63D, #453D3F) !default;

.ct-legend {
    padding: 0;
    font-family: sans-serif;

    li {
        position: relative;
        padding-left: 1.3em;
        margin-bottom: 0.3em;
        list-style-type: none;
    }

    li::before {
        height: 1em;
        width: 1em;
        position: absolute;
        top: 0.1em;
        left: 0;
        content: '';
        border-radius: 1em;
    }

     @for $i from 0 to length($ct-series-colors) {
          .ct-series-#{$i}::before {
            background-color: nth($ct-series-colors, $i + 1);
        }
    }
} 

[dsbudiac]

@aml987 my example (and the code you've copied) is written using SCSS, not CSS. You'll need a compiler to convert to CSS. If you're unfamiliar w/ SASS or SCSS, here's a good place to start: http://sass-lang.com/guide

Then, you can simply append the following block to chartist.scss, and make sure your page references chartist.css:

.ct-legend {
    padding: 0;
    font-family: sans-serif;

    li {
        position: relative;
        padding-left: 1.3em;
        margin-bottom: 0.3em;
        list-style-type: none;
    }

    li::before {
        height: 1em;
        width: 1em;
        position: absolute;
        top: 0.1em;
        left: 0;
        content: '';
        border-radius: 1em;
    }

     @for $i from 0 to length($ct-series-colors) {
          .ct-series-#{$i}::before {
            background-color: nth($ct-series-colors, $i + 1);
        }
    }
}

[gionkunz]

@dsbudiac thanks for your efforts here! Much appreciated :-)

I think this will be the next issue I pick up as I think its the one pressing a bit in terms of complete functionality. I'll push a branch on the weekend and we can work there.

Cheers
Gion

[gionkunz]

@aml987, the point is that legends are something you can do very easily outside of Chartist, for example with a ul>li as @dsbudiac showed in his example. Chartist is using the SASS pre-processor and in order to use it to its full flexibility you'd need to have a SASS compiler in your workflow. If you don't have this available you can just create your own classes and style your legend completely outside of Chartist.

[aml987]

@dsbudiac thanks, your comments were very useful and I used http://jsfiddle.net/zetzt9gu/ and signed up in http://jsfiddle.net after your first comment and I start learning Sass, thank you alot,
@gionkunz thanks

[gionkunz]

This was closed with 0.1.11. However, the labelOverflow thing is not yet implemented.

[mukiwu]

though the issue is close, but I want to thank everyone, I just update to v0.1.11, it's a nice work , and thanks, again 💃

[gionkunz]

Happy to see this working out for you mukiwu :-) without people raising issues Chartist would never get any better ;-)

[shmup]

Regarding @aml987's jsfiddle, here's an updated (resources were 404'ing) example: http://jsfiddle.net/zetzt9gu/255/