This app demonstrates using a popular charting library, Chart.js, for rendering charts within nodes.
The data for each chart is stored on the node data in the model. In this case the datasets
property value has the same properties that are expected by the Chart.js configuration, but you could organize the data however you want.
The makeLineChart conversion function is used by a Binding on Picture.element to generate a Canvas element that can be shown in
the node. Most of the implementation of that function is specific to Chart.js. The rendering requires the Canvas to be in the HTML DOM. To avoid
accumulating resources, the configuration of the chart defines an onComplete event handler to remove the Canvas element from the DOM. That
allows any future removal of the Node from the Diagram not to leave an unused Canvas element behind.
GoJS Diagrams can be used alongside other HTML elements in a webapp. For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the HTMLInfo class.
More information can be found in the GoJS Intro.
GoJS is intended to run in any environment that executes JavaScript. This includes on browsers and within browser frameworks, and also in headless contexts such as Node.js.
We maintain examples for common frameworks:
More information, including usage on frameworks including Electron, Blazor, and node.js, can be found at the GoJS Intro.