# JSXGraph Reference

## JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

## Elements

## Classes

- _global_
- Angle
- Arc
- Arrow
- Arrowparallel
- Axis
- Bisector
- Bisectorlines
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Constants
- Curve
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- ForeignObject
- Functiongraph
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Chart
- JXG.Circle
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Dump
- JXG.EventEmitter
- JXG.ForeignObject
- JXG.GeometryElement
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Legend
- JXG.Line
- JXG.Math
- JXG.Math.Clip
- JXG.Math.Extrapolate
- JXG.Math.Geometry
- JXG.Math.IntervalArithmetic
- JXG.Math.Metapost
- JXG.Math.Nlp
- JXG.Math.Numerics
- JXG.Math.Plot
- JXG.Math.Poly
- JXG.Math.Poly.Monomial
- JXG.Math.Poly.Polynomial
- JXG.Math.Poly.Ring
- JXG.Math.ProbFuncs
- JXG.Math.Quadtree
- JXG.Math.Statistics
- JXG.Math.Symbolic
- JXG.NoRenderer
- JXG.Options
- JXG.Point
- JXG.Polygon
- JXG.Server
- JXG.Server.modules
- JXG.SVGRenderer
- JXG.Text
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.VMLRenderer
- JXG.XML
- Label
- Legend
- Line
- Locus
- MajorArc
- MajorSector
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- Mirrorelement
- Mirrorpoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelpoint
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Point
- PolarLine
- PolePoint
- Polygon
- PolygonalChain
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopetriangle
- Spline
- Stepfunction
- Tangent
- Tapemeasure
- Text
- Ticks
- Tracecurve
- Transformation
- Turtle

# Class JXG.Chart

JXG.GeometryElement
↳ JXG.Chart

Creates a new basic chart object. Do not use this constructor to create a chart. Use JXG.Board#create with type Chart instead.
Defined in: chart.js.
Extends JXG.GeometryElement.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| JXG.Chart(board, parent, attributes) The Chart class is a basic class for the chart object.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, childElements, dash, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, quadraticform, rendNode, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, type, visible, visProp, visPropCalc, withLabel

Field Summary
Field Attributes | Field Name and Description
--- | ---
| elements Contains pointers to the various subelements of the chart.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, childElements, dash, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, quadraticform, rendNode, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, type, visible, visProp, visPropCalc, withLabel

Method Summary
Method Attributes | Method Name and Description
--- | ---
| drawBar(board, x, y, attributes) Create bar chart defined by two data arrays.
| drawFit(board, x, y, attributes) Create line chart where the curve is given by a regression polynomial defined by two data arrays.
| drawLine(board, x, y, attributes) Create line chart defined by two data arrays.
| drawPie(board, y, attributes) Create pie chart.
| drawPoints(board, x, y, attributes) Create chart consisting of JSXGraph points.
| drawRadar(board, parents, attributes) Create radar chart.
| drawSpline(board, x, y, attributes) Create line chart that consists of a natural spline curve defined by two data arrays.
| updateDataArray() Template for dynamic charts update.
<private> | updateRenderer() Uses the boards renderer to update the chart.

Methods borrowed from class JXG.GeometryElement:
  _set, addChild, addDescendants, addParents, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hasPoint, hide, hideElement, labelColor, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, update, updateVisibility

Events borrowed from class JXG.GeometryElement:
  attribute, attribute:key, down, drag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

Class Detail
JXG.Chart(board, parent, attributes)
The Chart class is a basic class for the chart object.

Parameters:
{String|JXG.Board} board
  The board the new chart is drawn on.
{Array} parent
  data arrays for the chart
{Object} attributes
  Javascript object containing attributes like name, id and colors.

Field Detail
elements
Contains pointers to the various subelements of the chart.
Method Detail
{Array} drawBar(board, x, y, attributes)
Create bar chart defined by two data arrays. Attributes to change the layout of the bar chart are:

- width (optional)
- dir: 'horizontal' or 'vertical'
- colors: array of colors
- labels: array of labels

Parameters:
{String|JXG.Board} board
  The board the chart is drawn on
{Array} x
  Array of x-coordinates
{Array} y
  Array of y-coordinates
{Object} attributes
  Javascript object containing attributes like colors

Returns:
  {Array} Array of JXG polygons defining the bars

{JXG.Curve} drawFit(board, x, y, attributes)
Create line chart where the curve is given by a regression polynomial defined by two data arrays. The degree of the polynomial is supplied through the attribute "degree" in attributes.

Parameters:
{String|JXG.Board} board
  The board the chart is drawn on
{Array} x
  Array of x-coordinates
{Array} y
  Array of y-coordinates
{Object} attributes
  Javascript object containing attributes like colors

Returns:
  {JXG.Curve} JSXGraph function graph object

{JXG.Curve} drawLine(board, x, y, attributes)
Create line chart defined by two data arrays.

Parameters:
{String|JXG.Board} board
  The board the chart is drawn on
{Array} x
  Array of x-coordinates
{Array} y
  Array of y-coordinates
{Object} attributes
  Javascript object containing attributes like colors

Returns:
  {JXG.Curve} JSXGraph curve

{Object} drawPie(board, y, attributes)
Create pie chart. Attributes to change the layout of the pie chart are:

- labels: array of labels
- colors: (Array)
- highlightColors (Array)
- radius
- center (coordinate array)
- highlightOnSector (Boolean)

Parameters:
{String|JXG.Board} board
  The board the chart is drawn on
{Array} y
  Array of x-coordinates
{Object} attributes
  Javascript object containing attributes like colors

Returns:
  {Object} with keys: "{sectors, points, midpoint}"

{Array} drawPoints(board, x, y, attributes)
Create chart consisting of JSXGraph points. Attributes to change the layout of the point chart are:

- fixed (Boolean)
- infoboxArray (Array): Texts for the infobox

Parameters:
{String|JXG.Board} board
  The board the chart is drawn on
{Array} x
  Array of x-coordinates
{Array} y
  Array of y-coordinates
{Object} attributes
  Javascript object containing attributes like colors

Returns:
  {Array} Array of JSXGraph points

{Object} drawRadar(board, parents, attributes)
Create radar chart. Attributes to change the layout of the pie chart are:

- paramArray: labels for axes, [ paramx, paramy, paramz ]
- startShiftRatio: 0 <= offset from chart center <=1
- endShiftRatio: 0 <= offset from chart radius <=1
- startShiftArray: Adjust offsets per each axis
- endShiftArray: Adjust offsets per each axis
- startArray: Values for inner circle. Default values: minimums
- start: one value to overwrite all startArray values
- endArray: Values for outer circle, maximums by default
- end: one value to overwrite all endArray values
- labelArray
- polyStrokeWidth
- colors
- highlightcolors
- labelArray: [ row1, row2, row3 ]
- radius
- legendPosition
- showCircles
- circleLabelArray
- circleStrokeWidth

Parameters:
{String|JXG.Board} board
  The board the chart is drawn on
{Array} parents
  Array of coordinates, e.g. [[x1, y1, z1], [x2, y2, z2], [x3, y3, z3]]
{Object} attributes
  Javascript object containing attributes like colors

Returns:
  {Object} with keys "{circles, lines, points, midpoint, polygons}"

{JXG.Curve} drawSpline(board, x, y, attributes)
Create line chart that consists of a natural spline curve defined by two data arrays.

Parameters:
{String|JXG.Board} board
  The board the chart is drawn on
{Array} x
  Array of x-coordinates
{Array} y
  Array of y-coordinates
{Object} attributes
  Javascript object containing attributes like colors

Returns:
  {JXG.Curve} JSXGraph (natural) spline curve

{JXG.Chart} updateDataArray()
Template for dynamic charts update. This method is used to compute new entries for the arrays this.dataX and this.dataY. It is used in update. Default is an empty method, can be overwritten by the user.

Returns:
  {JXG.Chart} Reference to this chart object.

<private> updateRenderer()
Uses the boards renderer to update the chart.