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 Features in this sample

#### HTML Interaction

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.

Related samples

#### GoJS on Different Platforms

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:

- React: We provide a React Component as an NPM package and a usage sample. See the intro page Using GoJS with React for more information on React integration.
- Angular: We provide an Angular Component as an NPM package and a usage sample. See the intro page Using GoJS with Angular for more information on Angular integration.
- Vue: We provide a Vue.js Sample.

More information, including usage on frameworks including Electron, Blazor, and node.js, can be found at the GoJS Intro.

Related samples