5 ms·

Building a Complex Financial Chart with D3 and d3fc

tpetry 8y ago
The interesting part is that the „yahoo finance chart“ is really expensive at every charting library. Highcharts for example is costing 600€ with really powerfull charting functionality. Highstock which is costing 1000€ is needed in addition to high charts for simply the finance chart. There‘s really a need for an opensource component. Maybe some special component: You can use it for every chsrting library. It‘s only rendering the scrollable part at the bottom. So you could use it with every library. And the background chart would again be rendered by custom logic, obly the „overlay“ would be done by the library and emitting a ton of events that custom adapters can redraw the charts with any charting library and options you want.
- ColinEberhardt 8y ago
  There are some pretty powerful open source financial charting libraries, for example: http://rrag.github.io/react-stockcharts/ http://rrag.github.io/react-stockcharts/ http://techanjs.org/ http://techanjs.org/ (although no longer maintained) Although I'd argue that it isn't that hard to create your own, entirely bespoke, chart from scratch using D3 (and d3fc as an accelerator)
- rchaud 8y ago
  I find Highcharts' pricing model to be pretty fair. It's free for personal sites and nonprofits so you can experiment with it as long as you need to before making a decision. For the paid licenses, I'd much rather pay a one-time fee than be on the hook forever with monthly fees.
polskibus 8y ago
Does anyone know of a library that would take care of proper text layout in visualisations? I mean things like auto line split to make chart labels look best, etc.
- ColinEberhardt 8y ago
  That's a good question - with d3fc we have a component for label layout, but this is designed for labels within the plot area, avoiding overlaps / collisions etc ... https://d3fc.io/api/label-layout-api.html https://d3fc.io/api/label-layout-api.html I have thought about creating a more advanced axis that provides more powerful tick label layout. We already have our own axis component: https://d3fc.io/api/axis-api.html https://d3fc.io/api/axis-api.html The purpose of this is to support the decorate pattern.
LordHeini 8y ago
It does not work in firefox for me. Complains about missing polyfill "for older browsers".
- ColinEberhardt 8y ago
  Well spotted, thanks. I've just fixed that :-)
kapauldo 8y ago
Great write up. Thanks for sharing this.

The interesting part is that the „yahoo finance chart“ is really expensive at every charting library. Highcharts for example is costing 600€ with really powerfull charting functionality. Highstock which is costing 1000€ is needed in addition to high charts for simply the finance chart. There‘s really a need for an opensource component. Maybe some special component: You can use it for every chsrting library. It‘s only rendering the scrollable part at the bottom. So you could use it with every library. And the background chart would again be rendered by custom logic, obly the „overlay“ would be done by the library and emitting a ton of events that custom adapters can redraw the charts with any charting library and options you want.

ColinEberhardt 8y ago
There are some pretty powerful open source financial charting libraries, for example: http://rrag.github.io/react-stockcharts/ http://rrag.github.io/react-stockcharts/ http://techanjs.org/ http://techanjs.org/ (although no longer maintained) Although I'd argue that it isn't that hard to create your own, entirely bespoke, chart from scratch using D3 (and d3fc as an accelerator)
rchaud 8y ago
I find Highcharts' pricing model to be pretty fair. It's free for personal sites and nonprofits so you can experiment with it as long as you need to before making a decision. For the paid licenses, I'd much rather pay a one-time fee than be on the hook forever with monthly fees.

polskibus 8y ago

Does anyone know of a library that would take care of proper text layout in visualisations? I mean things like auto line split to make chart labels look best, etc.

ColinEberhardt 8y ago
That's a good question - with d3fc we have a component for label layout, but this is designed for labels within the plot area, avoiding overlaps / collisions etc ... https://d3fc.io/api/label-layout-api.html https://d3fc.io/api/label-layout-api.html I have thought about creating a more advanced axis that provides more powerful tick label layout. We already have our own axis component: https://d3fc.io/api/axis-api.html https://d3fc.io/api/axis-api.html The purpose of this is to support the decorate pattern.

LordHeini 8y ago

It does not work in firefox for me. Complains about missing polyfill "for older browsers".

ColinEberhardt 8y ago
Well spotted, thanks. I've just fixed that :-)

kapauldo 8y ago

Great write up. Thanks for sharing this.