ChartsCSS / charts.css

Open source CSS framework for data visualization.
https://ChartsCSS.org
MIT License
6.17k stars 175 forks source link

What are the hurdles to getting pie charts added? #71

Closed anied closed 7 months ago

anied commented 1 year ago

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.

ramiy commented 1 year ago

Hi @anied

As mentioned in CodePen, I want to simplify the framework. To be able to change chart type from 'bar' to pie without changing the <table> structure.

Currently the example in CodePen requires not only the --size variable but also the --start variable. I'm still looking for a way to do the same without the --start variable.

Do you know how we can move the accumulated amount of the "--size" variables to the next TR > TD ?

n3storm commented 1 year ago

I found out adding 0.01 to the calc renders an "acceptable" pie chart

      td {
        @include position-fullwidth();

        transform: rotate( calc( 1turn * var( --start, 0 ) ) );

        background: conic-gradient(
          var( --color, transparent ) 0 calc( 100% * ( var( --size, 0 ) + 0.01 ) ),
          transparent 0 100%
        );
AshfordN commented 1 year ago

I think this would necessarily require CSS to keep track of the increasing start position, but there is currently no way of doing that.

shaunroselt commented 7 months ago

Seems like Pie Charts are available now: https://chartscss.org/charts/pie/

It's still missing from the Chart Builder though.

ramiy commented 7 months ago

@shaunroselt You are correct. Pie chart was added in version 1.0.0. You can read all about it in the Migrate to v1.0 guide and in the pie chart page. You should also check the supported features page.

It's a different type of chart, a circular chart. Most of the features are not yet supported.