Ability to change number of decimals shown?

[joahg]

Currently, react-stockcharts truncates all numbers at 2 decimals (as far as I can see). Is there/Could we have the option to change that to, say, 7 or 8 decimals?

[itsjimbo]

Any component that has a displayFormat property can be changed, or for the tooltips I believe ohlcFormat is used.

import { format } from "d3-format";
import { timeFormat } from "d3-time-format";

...

    <Chart id={1}
                    ...
        <MouseCoordinateX
                rectWidth={60}
                at="bottom"
                orient="bottom"
                displayFormat={timeFormat("%H:%M:%S")} />
        <MouseCoordinateY
                at="right"
                orient="right"
                displayFormat={format(".2f")} />
        <OHLCTooltip origin={[-40, 0]} xDisplayFormat={timeFormat("%Y-%m-%d %H:%M:%S")
                 ohlcFormat={format(".2f")}  />

       ....

         />

Hope that helps!

[joahg]

Awesome, thanks! That helped me to get the decimals on the MouseCoordinates, but I still need to do it on the CurrentCoordinate and Axes as well. Also, I need to figure out how to fix the styling on the flags on the side to accommodate the extra decimals. Do you guys know how to do that?

[rrag]

MouseCoordinateY and MouseCoordinateX have the following props, change its values for your desired result

    rectWidth: 80,
    rectHeight: 20,
    orient: "bottom",
    at: "bottom",

    fill: "#525252",
    opacity: 1,
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
    fontSize: 13,
    textFill: "#FFFFFF",
    snapX: true,

similarly for https://github.com/rrag/react-stockcharts/blob/v0.6.0/src/lib/coordinates/MouseCoordinateY.jsx#L44

[joahg]

Alright, that works, thanks. What about the other issues there? the CurrentCoordinate and Axes?

[rrag]

CurrentCoordinate does not display any text, I guess you mean https://github.com/rrag/react-stockcharts/blob/v0.6.1/src/lib/coordinates/EdgeIndicator.jsx#L74

XAxis - https://github.com/rrag/react-stockcharts/blob/v0.6.1/src/lib/axes/XAxis.jsx#L34 YAxis - https://github.com/rrag/react-stockcharts/blob/v0.6.1/src/lib/axes/YAxis.jsx#L33

Browse through the source of the individual components you are using, there are a lot of props you could customize, all of which are not documented.

Welcome a PR to improve the docs and help others

[joahg]

Awesome, thanks, that works for me :)

[joahg]

Alright, so that part is fixed, but now I'm running into an issue where part (most) of the YAxis is not able to be targeted with the mouse to click and drag, because it's not in the ChartCanvas. I am guessing this is because I'm not using the traditional 2 decimal place size. I've tried to adjust the ChartCanvas margin and padding to account for this, but that isn't seeming to help any at all. What do I need to do to make this work correctly?

[rrag]

why would you want to show 48.000000 what is the value in showing so many 0s after the decimal place?

there is a property available in YAxis to control the width of the draggable area. look at all the props and default prop values in YAxis.jsx

[joahg]

that is just testing data that I am using to build out the charting component. I am working with Bitcoin/cryptocurrencies, so I need all 8 significant digits in the output. I'll take a look in YAxis and see what I can find