HTML5 stock chart package in go.
Generate interactive, responsive, and performant chart with HTML5 canvas and web assembly.
The chart can be embedded into any HTML pages.
See the example.
- draw candlestick with OHLCV series
- X time axis navigator
- X time axis with auto scale and autolabelling
- zoom-in and zoom-out with the mouse wheel
- shift selection with the Shift-Key and the mouse wheel
- Y value axis with auto scale and auto labelling
- responsive: handle resize event and browser zoom
- embedding chart with a single HTML elemnt
- drawing on any browser accepting HTML5 canvas & Webassembly
- only GO, no JS
- Written in go (v 1.23)
You need to add a <stockchart> element in your HTML page, specifying a unique chart ID like:
<stockchart id="mychart" style="height:450px; width:100%; display: block;"></stockchart>Than in tha main function of your wasm code, your need to feed a data set
// build your dataset
dataset := BuildRandomDataset()and to pass it to the StockChart factory
// Create a new chart
_, err := stockchart.NewStockChart("mychart", rgb.White, myDataset)
if err != nil {
fmt.Println(err.Error())
os.Exit(1)
}That's it!
We've used HTLM5 <canvas> providing the APIs to draw in a 2D context.
The stockchart struct provides the chart factory:
- default chart builder, adding canvas to the DOM
- handles the resize event and coordinate calculations
- dispatch events, such as mouse events or time selection changes, to the layers and their drawings
To avoid to redraw everythings everytime a user hover the graph or change the time selection we've used the layering technics. Every layer is a canvas. Canvas are transparent by default also you can stack them and redraw on one canvas keeping the drawing on the other one intact.
The drawingLayer struct handle the layout of the layer and embed a stack of drawings.
Overall drawing is breakdown in multiple functionnal drawings, each one added to one or many layers. Functionnal drawings are based on the drawing stuct providing some drawing primitives and embedding the series of data to draw.
Some documentation available here https://tinygo.org/docs/guides/webassembly/ and here https://github.com/golang/go/wiki/WebAssembly
Go provides a specific js file called wasm_exec.js that need to be served by your webpapp. This file is located in the /misc/wasm/ subdirectory of your go root path. Usually we copy it to the folder containing all static files of your webapp, like cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./examples/web/ for the above example. It's important to get the version corresponding to your go environment, it's why we recomend to copy it from your GOROOT.
The demo example is available here https://larry868.github.io/stockchart/
More info about the example and how to rebuild it see readme.
- v0.8.0 alpha: upgrade to go v1.23
- v0.7.1 alpha: bug fix and refactoring
- v0.7.0 alpha: major change in the way selections works, now works with request out of the chart
- new feat candle selection is displayed on the navbar and the chart
- new feat shift timeselection grabbing the timeselector
- new drawing : volume bars
- new feat : possibility to add subcharts
- v0.6.1 alpha: upgrade with timeline v2.2.1
- v0.6.0 alpha: handle click event to select a data, fire func on select
- v0.5.0 alpha: fix + enhance series list
- v0.4.0 alpha: improved management of time selection + renaming the package
- v0.3.0 alpha: major refactoring
- v0.2.1 alpha: improved management of datalist
- v0.2.0 alpha: X time axis cursor position in the graph area
- v0.1.0 alpha: 1st try
V0.7.0 introduces a debug function to easily generate output, see debug.go file
- The Web Assembly code generated is based on the webapi package.
- Browsers running web assembly