Comments (17)
Please, add an option that allow us to display what every color means, like this img:
from chartist.
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
from chartist.
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.
from chartist.
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:
- hide the label completely for that segment, or
- 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).
from chartist.
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
from chartist.
@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.
from chartist.
@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.
from chartist.
@dsbudiac thanks but, it's appear without legend. Where is my mistake???
from chartist.
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);
}
}
}
from chartist.
@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);
}
}
}
from chartist.
@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
from chartist.
@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.
from chartist.
@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
from chartist.
This was closed with 0.1.11. However, the labelOverflow thing is not yet implemented.
from chartist.
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 💃
from chartist.
Happy to see this working out for you mukiwu :-) without people raising issues Chartist would never get any better ;-)
from chartist.
Regarding @aml987's jsfiddle, here's an updated (resources were 404'ing) example: http://jsfiddle.net/zetzt9gu/255/
from chartist.
Related Issues (20)
- [Bug]: More descriptive error message when DOM node for container was not found
- [Bug]: SASS styling no longer available HOT 8
- Please provide a `dist` folder at the root of the repository HOT 1
- [Bug]: Can't import `index.css` HOT 1
- [Bug]: package.json: conflict between `puppeteer` and `@storybook/addon-storyshots-puppeteer` HOT 1
- Do not set Chart.svg as protected or allow direct access in some other way
- Implement SVG graphics export HOT 1
- precompiled releases again like before HOT 3
- [Bug]: Using responsive options fails on some browsers
- [Bug]: old website linked in repo HOT 1
- Please provide a standalone example (HTML/CSS/JS) of Chartist 1.0+ in action HOT 2
- Support for viewBox for scalable and responsive charts
- [Bug]: Pulling from CDN gives latest 0.x.x version HOT 4
- Support dual Y-Axis HOT 1
- barstack with label on bar
- [Bug]: Error: ENOENT: no such file or directory, open '\node_modules\chartist\src\styles\index.scss'
- Support plot legends
- [Bug]: Invalid Homepage Link on npm
- NodeJS JSDOM support - ability to render on the backend
- [Bug]: Prototype Pollution Vulnerability Affecting chartist module, versions >=1.0.0 <=1.3.0
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chartist.