chartscss / charts.css Goto Github PK
View Code? Open in Web Editor NEWOpen source CSS framework for data visualization.
Home Page: https://ChartsCSS.org
License: MIT License
Open source CSS framework for data visualization.
Home Page: https://ChartsCSS.org
License: MIT License
Hi! Thanks for this very clean and useful library.
Quick thoughts. I think it would be great if we could support waterfall charts like:
from MS Office
This can probably be realized by enhancing the bar chart with each bar starting point being set relatively to its predecessor, rather than at 0.
An optional complementary feature would be special bars for intermediate sums.
If you think its relevant, I can take a stab at it.
As i'm new to this library, I would appreciate if you could put me on the right track.
Area charts sometimes show a very thin vertical spacing between the columns. It seems to depend on the viewport width, screen resolution and amount of data, but I think that the idea with an area chart is that it's seen as a single block (unless some data-spacing-*
is specified), right?
For example, in https://chartscss.org/charts/area/ I see this:
How can this be polished so no spacing is shown?
Explore this new concept:
table {
display: grid;
grid-template:
"heading heading"
"y-title data"
". x-title";
}
This can help introduce axis titles.
πHello, thank you very much for developing this framework. I'm from China. In order to let more people understand your framework, I want to translate your framework documents into Chinese and submit them to you through GitHub. Do you think it's ok? I'm looking forward to your reply.π
First, I want to say that the library is cool and thank you for your work!
I'm using it for a line chart that often has 100% values (i.e. --size: 1). This is awkward because the line isn't rendered at all in that case. The clip-path polygon evaluates to 100% * (1 - 1), which of course 0. I do see that this ends up showing the full line at --size: 0, so it's good that is visible. I'd suggest showing half the line at both extremes, though.
Changing the clip-path value to this does the trick:
clip-path: polygon(
0 calc(100%*(1 - var(--start, var(--size))) + (.5 * var(--line-size))),
100% calc(100%*(1 - var(--size)) + (.5 * var(--line-size))),
100% calc(100%*(1 - var(--size)) - (.5 * var(--line-size))),
0 calc(100%*(1 - var(--start, var(--size))) - (.5 * var(--line-size)))
)
Here's a demonstration: https://codepen.io/rognstad/pen/ZEKVeNm?editors=110
I'd be happy to submit a PR if this sounds useful to you. Thanks!
Hi!
I'm trying to add tooltip for this simple pie chart https://chartscss.org/charts/pie/ but it sounds that it's not yet supported. Am I right?
I'm noticing that when there is a stark difference in height - width ratio between table rows, it results in a varied thickness of lines along the line chart. See the picture below for an example of what I mean (notice the first line is thin and tall, and the others are thicker).
Curious if this is a known issue, or if there's a known way to manipulate the css to account for this. Will look into it myself if not.
Thank you for the excellent work being done here. I'm curious if you have an opinion on how hard it would be to implement an overlapping Bar or Column chart similar to this:
https://images.app.goo.gl/AMwqbdqhxMPiPJiB8
Do you think the mixed chart would be relevant here, with two or more bar charts stacked over the other with scaled margins? I'm willing to tackle this, but would like to get your estimation of effort and if possible a point in the right direction.
Thanks!
Former shorthand is currently deprecated
This approach is very interesting and - relying on tables - could also be very accessible.
However, from a first text with the screen reader I noticed that important labels (thead
, th
, etc.) are hidden with display:none
. This makes them completely hidden from assistive technologies.
Perhaps with another approach you can achieve the same result, while maintaining the high level of data accessibility, for example: https://webaim.org/techniques/css/invisiblecontent/
Same html code works fine in v0.9.0 but not 1.0.1.
In v1.0.1, chart looks like a background image and other html data (not part of chart) floats on it.
BTW, i use Bootstrap v5.
I noticed this in the Chart Builder - if you select Line Chart, the peak is cut off for the "100" value.
Likewise, if two side-by-side bars are both at 100, the line disappears completely.
Requesting a feature to have a gauge style chart, showing one or more values along the arc.
The zero-value on the left, the 100 value on the right.
Showing values --start:0 --size:0.90 would make an arc that is 90% of the full arc.
And one could have --start:0 --size:0.20 and then --start:20; --size:20 and have a first section of color-a and a second section of color-b.
I'll give you (or someone) $100 USD (via PayPal? BTC?, tell me) for this feature; even as "beta" quality.
See this test result: https://yellowlab.tools/result/fy21f9wpqw/rule/cssOldPropertyPrefixes
Many property prefixes such as -moz-
or -webkit-
are not needed anymore, or by very few people. Sometimes, they have never even existed. We can remove them or replace them with the non-prefixed version. This will help reducing your stylesheets weight.
TODO: update the css-prefixes
script in package.json
.
The Pie Charts page of the docs note that they are not in the current release, and suggest there is some challenge in getting them production-ready. However, there are no notes specifying what issues are present, and the CodePen example looks pretty good. Can you share what functionality is missing from getting this ready for the next release? I'd happily spend some time working on it if I knew what work was needed.
Hi @ramiy , thank you (and Lana) very much for your great work on the Charts.css! The charts look so nice, and I love the Charts.css's approach so much, that I can't help but create a binding for Charts.css for it to be used in Python. To honor the heritage, the binding is named - what else - charts.css.py, currently supporting most of the basic functionalities of charts.css, demonstrated in its doc.
It would be nice if you can add a "language binding" section in Charts.css 's doc and link to the charts.css.py project. This way you/we can better serve a segment of audience who are familiar with Python but less fluent in css.
CSS file is 76 Kb minified, it would be great to be able to select only the kind of charts that we use so we can have a smaller CSS file.
For example, only include what's necessary for column charts.
There is no representation of the quantity as a percentage in individual portions of the pie chart. Mentioning the percentage will create a more user friendly experience by supporting the UX.
Hi Rami, I notice that there was a "1.0.0" commit recently. Another recent commit even mentioned pie chart. Is release 1.0.0 and/or pie chart coming soon? :-) Can't wait to try it out.
This looks great!
However this uses classes like column
and row
that can easily conflict with other css frameworks.
Is there a way to generate a css with a namespace? e.g. chartcss-row
Something like https://purecss.io/ where every class has pure-...
It would be great if there is an alternative compiled css with namespaces.
I'd like to show column chart that mixes positive and negative values (i.e., bars oriented above and below the X axis).
Looking at the Orientation docs, we can set reverse
at the chart level.
Are there any plans to support the reverse
class at the td
level within a chart? I don't see it in the roadmap.
Hello
Thanks for the framework.
I would like to put a background image on an 'area'. Unfortunately, by doing this I'm deleting part of the 'data'. I suspect that the 'td:before' in the next column is hiding part of the data. I've tried changing the z-index, but it has no effect. Do you have any ideas?
thank
This is a great library. Data in a table is so much more usable than Google charts that we are currently using.
Would it be easy to add stacked bar charts? I.e. each bar is the stacked "sum" of multiple components? Then we could switch.
Hi,
It'd be nice to allow showing data points on secondary axes, which currently give a sense of scale but don't allow estimating what data is roughly associated with a given bar/point.
Using the example in the documentation: there are secondary axes, but what data point (or milestone) do they represent, in relation with the bars? Secondary axe could in turn show something like β10kβ, β20kβ, β30kβ etc.
I have a bar chart with multiple datasets in the same unit of measure, but different scales, so I'd like to be able to set data point on the secondary axes for each of them.
Thanks!
It's unclear to me if this is a bug related to the browser/version, HTML table elements or this library. The <td>
elements in my <table>
were preventing responsive resizing as the viewport shrank on Safari v15 (MacOS) and the solution appears to be explicitly declaring word-break: break-all
on the table/td elements. This seems to naturally occur on newer/other browsers and doesn't have to be explicit.
I was experiencing this issue even with a fresh implementation of the library, so I don't think it was my implementation, but I could definitely be wrong.
Mostly posting for anyone else breaking their brain over this π
Looking at the samples <td style="--size: calc( 60 / 100 );"> $ 60K </td>
might be more semantically valuable if we did something like
<td data-value="60" data-total="100" style="--size: calc( attr("data-value") / attr("data-total");"> $ 60K </td>
or something similar... and we could have the default style for size be implicitly that calc
and do similar for --start
. Also would be cool to be able to reach up for the data-total
value using the cascading of CSS ;)
Please indicate supported browsers in documentation.
thanks
Adding the multiple
class allows for groupings of bars or columns, but adding stacked
eliminates the groupings and instead products stacked bars/columns.
Is there an option for having groups of stacked columns?
Hi,
In a bar chart, bars that are narrower than the length of their data label will scale vertically, and the data label will word-wrap. For example:
I think a way to solve that, which would also make more sense for bars, is to display data labels next to the bar, instead of within it. Data for bars that are maxed would end up being displayed βoutsideβ the graph, though.
HTH.
When printing the column examples on the following environment,
the ones with the second axes enabled are printed with a black background.
Expectation | Reality |
---|---|
Probably related to how the axes are implemented.
background-image: linear-gradient(0deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width));
Have not found a workaround yet.
I receive the following error when trying to run npm run build
from Create-React-App.
Non-minified version works fine.
charts.css/dist/charts.min.css
ParserError: Syntax Error at line: 1, column 25
Is there a way to do scatterplots? Did not see it on the landing page
For looking at the docs, is not clear to me I can add lables in both axes, all examples use at most only one, giving the feeling this feature is missing.
I would even recommend to having an example with "all the complementary info you can add".
Library looking good!
Shish isn't just the one that makes you want a raja
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.