# Angles and Angle Markers

Another useful features available from KGJS is the angle marker, used to draw angles on graphs.

## Angle Marker

Here is a basic way to draw an angle at the origin:

layout: OneGraph: graph: xAxis: {min: 0, max: 5} yAxis: {min: 0, max: 5} objects: - AngleMarker: measure: 45

As you can see, the `measure` of the angle marker is simply the measurement of the angle in degrees, starting from the positive x-axis.

You can also move an angle marker to a different coordinate, for example to show the angle between the two segments below:

layout: OneGraph: graph: objects: - Segment: a: [2,2] b: [8,8] - Segment: a: [2,2] b: [8,2] - AngleMarker: measure: 45 coordinates: [2,2]

You can also create angles using three points:

layout: OneGraph: graph: objects: - Angle: pointA: coordinates: [8, 5] label: {text: A, position: tl} pointB: coordinates: [2, 5] label: {text: B, position: l} pointC: coordinates: [8, 8] label: {text: C} showSegments: true

Notice a couple of things above:

• `showSegments: true` shows the segments in between the points making up the angle between them.
• Remember that the position of the labels on the points can be specified. Check out the Point documentation for more information.

Angles can be used in fun ways with draggable features. Let’s take a look at a long example below:

params: - {name: ax, value: 8, round: 0.01} - {name: ay, value: 5, round: 0.01} - {name: bx, value: 2, round: 0.01} - {name: by, value: 5, round: 0.01} - {name: cx, value: 8, round: 0.01} - {name: cy, value: 8, round: 0.01} layout: OneGraph: graph: objects: - Angle: pointA: coordinates: [params.ax, params.ay] draggable: true label: {text: A, position: tl} pointB: coordinates: [params.bx, params.by] draggable: true label: {text: B, position: l} pointC: coordinates: [params.cx, params.cy] draggable: true label: {text: C} showSegments: true

Here, the `draggable: true` attribute of the points allows them to be dragged along whatever parameters it uses. Here, both the x- and y-coordinates of each point are parameters, so the points can be dragged in the x- and y-direction. The angle will adjust as the points move around!

KGJS
KineticGraphs.org
Getting Started

Authoring Sandbox

Graphs & Layouts

Graphs

Layouts

Sidebars

Graph Objects

Styling Graph Objects

Points

Lines

Curves

Contours

Shapes and Areas

Segments and Arrows

Angles and Angle Markers

User Interactions

Parameters

Calculations

Dragging

Economics

Econ Schema

Supply and Demand

Consumer Optimization

Exchange