chartscss/charts.css

Open source CSS framework for data visualization.

charts.css's Issues

Overlapping data spans in stacked column charts

Thanks for the framework!

Any advice on how to deal with overlapping data spans? e.g.

It would be great to have them vertically stacked on top of each other to ensure readability.

I didnt find any option for this in the docs.

Thanks for any hints!

Hxyv

Shish isn't just the one that makes you want a raja

Absence of percentage label in pie 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.

Remove old vendor prefixes

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.

Column Charts: Reverse orientation on a per-td basis (i.e., negative values)

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.

Line gets clipped in line chart when value is 100%

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.

A charts.css binding for Python is available

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.

Replace color-adjust with print-color-adjust

Former shorthand is currently deprecated

after ten elements in legend, colors don't repeat

Data label upright on pie charts

is there a way to prevent the data label on the pie charts from rotating?

I have tried playing with the .charts-css.pie tbody tr td .data class however when I edit the rotate value all the labels merge instead of staying in their designated area.

Translated into Chinese

😊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.😄

Is there a way to make line thickness uniform for line charts?

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.

Divide CSS file in smaller packages?

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.

Second axes breaks Firefox B&W printing

When printing the column examples on the following environment,

• OS: macOS 14.2.1
• Firefox: 121.0.1
• Destination: Samsung M203x Series
• Color mode: Black and white (disabled)
• Options: ✅ Print backgrounds

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.

Unable to `build` using minified version of script

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

Option to label axes

Could we please have an option to label our axes? It's pretty easy based on <thead>, I did a mockup myself.

Grouped stacked columns

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?

Donut pie charts

It would be great to have an option in pie charts to have a "doughnut" style, with a transparent hole in the center like this:

What are the hurdles to getting pie charts added?

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.

Pie chart tooltip

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?

Table Data Cells <td> interfering with responsive Table <table> elements (Safari v15 MacOS)

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 😭

Brf has been a 5

Gauge Style Chart

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.

Waterfall charts

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.

v1.0.1 seems not compatible with 0.9.0

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.

Avoid spacing in area charts

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?

Accessibility

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/

Show data points on secondary axes

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!

Namespacing?

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.

sudo apt-get install nodejs && sudo apt-get install npm

Pie charts don't support advanced colors

Pie charts only seem to accept flat colors, but advanced colors like gradients, background images or patterns don't work fine in them.

Here's a screenshot where I'm trying a gradient, it works fine on the column chart at the bottom but the pie chart just leaves it white:

Data tags in a bar chart impact the height of the bars

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.

hidden 'data' in 'area'

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

Enhancement idea: Can we improve things with css `attr` values?

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 ;)

Scatterplots

Is there a way to do scatterplots? Did not see it on the landing page

Overlapping Bar and Column Chart

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!

Can we add labels in both x / y axis?

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!

Improvement: replace flex with grid

Explore this new concept:

table {
  display: grid;
  grid-template:
    "heading  heading"
    "y-title  data"
    ".        x-title";
}

This can help introduce axis titles.

Stacked bar charts - would be so great

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.

Which browsers are supported?

Please indicate supported browsers in documentation.
thanks

Line chart shows full line at size: 0 and no line at size: 1. I would suggest showing half the line in both situations

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!

Is v1.0 going to be released anytime soon?

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.