Is there any way to directly edit the styling of e.g. the Edge indicator?

[imnas]

I'm trying to fix the padding, but there are no props that allow me to do that, thanks rrag!

[imnas]

It's basically not pixel perfect right now, and the text is not vertically aligned, i'm using canvas+svg

[neosavvy]

Awesome charts, I'm totally digging it!

I also need to style the edge indicator or set the width to provide space for large prices (ie price of BTCUSD for example.)

[cliffhall]

@neosavvy I was able to get the price of Bitcoin to fit in the EdgeIndicator / MouseCoordinateY with some tweaking of the params.

MouseCooridnateY renders an EdgeIndicator, but it is slightly different from the EdgeIndicator. Note how in your screenshot that the EdgeIndicator (green) is taller than the MouseIndicatorY and the arrow is a little whacky as a result.

To make them both look the same, fix the wonky arrow, and display Bitcoin price readably:

1. Increase the rectWidth to 60 from the default of 50.
2. Decrease the rectHeight to 18 from the default of 20.
3. Consult the D3 formatting options and tell it to right justify within the space allowed (using '>'). Oddly the price doesn't go fully to the right of the rect, but at least it does move it right enough to be readable.
4. On the EdgeIndicator only, decrease strokeWidth to 1 from the default 3.

<MouseCoordinateY 
   at="right" orient="right" 
   rectHeight={18} rectWidth={60} 
   displayFormat={format(">.2f")} 
/>

<EdgeIndicator 
   itemType="last" orient="right" edgeAt="right" 
   strokeWidth={1} rectHeight={18} rectWidth={60} 
   displayFormat={format(">.2f")}  
   yAccessor={d => d.close} fill={d => d.close > d.open ? "#6BA583" : "#FF0000"}
/>