Animated Charts, graphs

Can you recommend other options on the market then Charter which is already retired product and no longer supported.

I am looking for some nice animated charts based on Excel data in user friendly UI. Similar to Blocs Charts : https://blocs.store/product/charts/

Would be fantastic to have animated charts developed by Elements team as an add on or have them built in in the future updates..

Nobody using charts in their web designs?

I had some luck using AI to generate code for the Elements but the value editing is just cumbersome.

Either way, I really do hope something like Charter or Chart Bric will pop up in the Elements store one day. I think it’s pretty essential. Many companies love to see their “growth” and product sale charts on their web :wink:

I put this together as a custom component this morning :smiling_face:

It’s a little rough around the edges but it works and uses chart.js, just like the $49 Blocks version…

:backhand_index_pointing_right: Open the Project in Elements.

I have no words . . Dan, you are magnificent !!! This is amazing. Can you include this in the next version of Elements? Will save those $49 for my PRO update later this year, then.

Actually, it was something that was missing :clap:

The version with the standard Tailwind colors? I ask because we developers aren’t allowed to use them in components.

It would be fantastic to be able to bring in many external libraries that currently can’t be implemented in Elements due to the ban on standard colors, including the components possible with HypePro in Elements, which can be implemented without problems in other programs.

Are there any exceptions? :folded_hands:

This custom component is just a fast vibe coded chart component that was thrown together, it’s not shipping in Elements 3.

Don’t be so dramatic, there’s no ban on standard colours in Elements :roll_eyes:

All we asked is that, if possible developers should always try to use the Tailwind theme colour picker as that’s what customers prefer, it makes the entire system more consistent and cohesive, and better to work with. If you simple can’t use Tailwind colours in a Component, then sure, fall back to hex colours, but that should be the exception, not the rule.

Thanks, I understand this, and it makes sense, because the user needs to use external components with the same logic as native ones.

I’ve been working on this for a while, even trying to find a script that does real-time color conversion, but I haven’t succeeded yet, at least trying to offer a convenient solution for the user.

A middle ground is to offer the standard Tailwind color tables pre-packaged with an additional option, a field for customizing the standard color.

So, HypeTitles and Path can be available also for Elements

This is my best compromise :slight_smile:

Please get Hupertitles in Elements ASAP. I have been struggling for ages to get what I want and this fits the bill. TIA

And I need PATH for a project so I hope to see it on the store ASAP, thanks.

@dan The best compromise is to create via JS the entire color set with all its variations using a dynamic color map.

like 'zinc-50': '#fafafa', 'zinc-100': '#f4f4f5', 'zinc-200': '#e4e4e7', 'zinc-300': '#d4d4d8', 'zinc-400': '#a1a1aa', 'zinc-500': '#71717a', 'zinc-600': '#52525b', 'zinc-700': '#3f3f46', 'zinc-800': '#27272a', 'zinc-900': '#18181b', 'zinc-950': '#09090b', this is just a single example, I made the color map for all colors and all variations

The only limitation of this technique is that it isn’t connected to Elements’ dynamic styles. However, it’s possible to add an additional field to enter a custom color in HTML. Is this a viable option?

This obviously only concerns color customization of external libraries that do not actively support tailwind, and this would allow for a universe of libraries :grinning_face:

Thank you both :folded_hands: for your interest, and I’m also pleased that you appreciate the products made with HypePro. Much depends on the freedom I have in using color conversion systems, so I’ll let you know if there’s any news.

I just created a dropdown with all the colors (as title) and and the hex as the value, cant find it at the moment will find it later

just need to convert to TW4 and extra colors

@upssjw It seems like a smart alternative! :clap:

Back to the topic - updated Table Component looks great. Maybe in the next iterations of Elements this new Chart could be included in Elements build and linked to the Table Component for data sync?

just wanted to jump in here and show you a technique that is now available when building components in Elements 3.

Tailwind 4 exposes all of the of the theme colours to you via CSS Custom Properties, so you can format a themeColor property to fetch the underlying colour from the CSS, rather than needing to hard code colour strings in your component.

Watch this and let me know if you have any questions!

Here’s the project from the video with the example code: elementsapp://downloadDocument/38i9JWRREsfa

Hi @dan,

I’ve been using your Chart component in my first Elements project. Everything works perfectly in Elements Preview, including the chart animations, but after exporting the site and uploading it to the server, none of the charts are visible.

It seems the Chart components may not be exporting correctly with the project. I also tried both Export Site and Publish to Folder, with the same result.

I contacted support, and Daniel recommended posting here.

Could you please take a look at your Chart component and see what might be going wrong during the export?

Thank you,
Mike

Some examples - preview from Elements all is perfect, when exported and uploaded thru Transmit, none of the Chart elements are visible.

PROJECT : elementsapp://downloadDocument/yIjcKHICkif0

@meonmac Sorry about that, there was a bug on export in the component!

I have now fixed it, and it’s all working as expected, try this out: elementsapp://downloadDocument/FW5hwtAvxaYv

No worries, I used screenshots for the demo instead :wink:

Thank you . . works like a charm. Now I Can’t wait for the Tables w/AI and hopefully with Charts in the next version together.