5 ms·
Since multiple chart libraries are on HN's first page right now, thought I'd ask a question. Working on a project that requires a very specific chart type, whic
by tech-historian 4y ago
Since multiple chart libraries are on HN's first page right now, thought I'd ask a question. Working on a project that requires a very specific chart type, which almost no chart frameworks provide. Anyone know of a library that offers:
- VERTICAL 100% stacked area chart
- Images can be used as background for each series
- Dynamic - mouseover displays information when hovering over a slice of the chart
The only thing I can find is this [1] but it seems to lack key features. Currently I've resorted to building a custom chart in SVG with js but it's pretty rough.
[1] https://docs.anychart.com/Basic_Charts/Stacked/Value/Vertical_Area_Chart https://docs.anychart.com/Basic_Charts/Stacked/Value/Vertica...
- da25 4y agoCheck : https://echarts.apache.org/examples/en/editor.html?c=area-stack https://echarts.apache.org/examples/en/editor.html?c=area-st...
- owlninja 4y agoYep +1 - just swap xAxis and yAxis and you get really close, and echarts has lots of customization. I just don't think you'll get images for a background with it.
- tech-historian 4y agoWill look into this, thanks.
- tech-historian 4y agoOffhand do you know if that offers: - 100% stacked area (also known as percentage stacked area) - inverted axis (so it's vertical, not horizontal)
- cube2222 4y agoI've seen the other responses already contain ready solutions, however in general, if you're in need of custom/non-standard graphs, then D3.js is a great library for constructing them, providing many common building blocks and a declarative API.
- beckingz 4y agoDo note that D3.js is a lower level library, so you will end up writing a lot of code to build a chart.
- tech-historian 4y agoD3 could be the right tool for this. When I first used D3 years ago, it seemed so incredibly overkill. But maybe it's just right for something like this project, with these specific requirements.
- deleted 4y ago[deleted]
- cush 4y agoWhy wouldn't D3 work here?
- tech-historian 4y agoWhen I first used D3 years ago, it seemed so incredibly overkill. But maybe it's just right for something like this project, with these specific requirements.
- andreykh 4y agoLooks like it's all possible that you mentioned: 1) Create a 100% stacked area chart https://www.anychart.com/blog/2020/06/10/stacked-area-chart-javascript-tutorial/ https://www.anychart.com/blog/2020/06/10/stacked-area-chart-... OR https://docs.anychart.com/Basic_Charts/Area_Chart https://docs.anychart.com/Basic_Charts/Area_Chart + https://docs.anychart.com/Basic_Charts/Stacked/Percent/Area_Chart https://docs.anychart.com/Basic_Charts/Stacked/Percent/Area_... 2) Change chart = anychart.area(); to chart = anychart.verticalArea(); 3) Tune it up digging into the documentation, for example: https://docs.anychart.com/Common_Settings/ https://docs.anychart.com/Common_Settings/ https://docs.anychart.com/Appearance_Settings/ https://docs.anychart.com/Appearance_Settings/ https://docs.anychart.com/Graphics/ https://docs.anychart.com/Graphics/ etc. 4) Ask Support if not sure re anything (usually pretty fast and helpful): https://www.anychart.com/support/ https://www.anychart.com/support/