CodingNic

Live and Historical Data

Draw the Chart from Data

Live and Historical Data 35 min read

Draw the Chart from Data

Draw the Chart from Data

Use the chart’s canvas ref to render the fetched points.

The project calculates scale bounds from the returned rates, draws horizontal guides, maps each point to an x/y coordinate, fills the area under the line, and marks the latest point.

Keep the implementation tied to the data array rather than adding random values.

Test it

Change the currency pair and range and confirm the plotted line changes.

Checkpoint

The historical chart is driven by real API data and the selected pair.