Mafs

Appearance

On this page

Coordinates ​

Coordinates overlay a grid of lines on top of the Math Mafs canvas to give a sense of scale. Axes are pretty configurable—the spacing between lines, number of subdivisions, and the labels themselves can be altered.

VUE
<script setup lang='ts'>
import { Cartesian, Polar } from "mafs-vue"
</script>

Cartesian coordinate ​

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian } from 'mafs-vue'
</script>
<template>
    <Mafs :height="300">
        <Cartesian />
    </Mafs>
</template>

Props

<Cartesian ... />

NameDescriptionDefault
xAxis
false | Partial<AxisOptions & { subdivisions: number | false; }>
—
yAxis
false | Partial<AxisOptions & { subdivisions: number | false; }>
—
subdivisions
number | false
false

Axis options ​

Each axis—xAxis and yAxis—can be configured with the following options:

  • axis: Whether to draw the axis line.
  • label: Whether to draw the axis label.
  • lines: The spacing between each primary line orthogonal to the axis, or false to draw none.
  • subdivisions: How many subdivisions to draw per line, or false to draw none.

The entire axis can also be set to false to disable it entirely.

Slots

<Cartesian ... />

NameDescriptionDefault
xLabel{num: number}

render the num for each label

—
yLabel{num: number}

render the num for each label

—

Mafs also exports a helper function, markerPi and markerOdd, which can be passed to slot xLabel or yLabel to render in terms of π.

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian, markerPi, markerOdd } from 'mafs-vue'
</script>

<template>
    <Mafs :height="200" :viewBox="{ x: [-8, 8], y: [-Math.PI * 2, Math.PI * 2], padding: Math.PI / 2 }"
        :preserveAspectRatio="false">
        <Cartesian :xAxis="{ axis: true, label: true, lines: 1 }"
            :yAxis="{ axis: true, label: true, lines: Math.PI, subdivisions: 4 }">
            <template #xLabel="{ num }">
                {{ markerOdd(num) }}
            </template>
            <template #yLabel="{ num }">
                {{ markerPi(num) }}
            </template>
        </Cartesian>
    </Mafs>
</template>

Polar coordinates ​

Code
vue
<script setup lang="ts">
import { Mafs, Polar } from 'mafs-vue'
</script>

<template>
    <Mafs :height="300">
        <Polar :subdivisions="5" :lines="2" />
    </Mafs>
</template>

Props

<Polar ... />

NameDescriptionDefault
xAxis
false | Partial<AxisOptions>
—
yAxis
false | Partial<AxisOptions>
—
lines
number
1
subdivisions
number
—

Axis options ​

Polar coordinate take most of the same options as cartesian coordinate, except that lines and subdivisions affects the radial rather than the x and y axes.