chrt-axis

Axis component for Chrt

Usage no npm install needed!

<script type="module">
  import chrtAxis from 'https://cdn.skypack.dev/chrt-axis';
</script>

README

chrt-axis

Component for the creation of Axes in chrt. The axes define the area where the values are displayed and they help the reader to make sense of the position of the elements in the chart. Axes are based on scales (quantitative and categorical).

The component provides two types of axes: the X Axis (xAxis) which runs horizontally and the Y Axis (yAxis), which runs vertically.

A chrtAxis is formed by a set of visual elements:

  • One axis line
  • Ticks
  • Labels
  • Axis range
  • Axis title

One chart can have multiple Axes, and they can be oriented (left/right and top/bottom).

Installing

For use with Webpack, Rollup, or other Node-based bundlers, chrt-axis can be installed as a standalone module via a package manager such as Yarn or npm.

npm install chrt-axis chrt-core

chrt-axis can be used as part of the chrt package:

npm install chrt

chrt-axis is distributed as an ES module; see Sindre Sorhus’s guide for more information.

Usage

ES6 / Bundlers (Webpack, Rollup, etc.)

import Chrt from 'chrt-core';
import { xAxis, yAxis } from 'chrt-axis';

Chrt()
    .data([1,2,3,4,5,6])
    .add(
        xAxis()
    )
    .add(
        yAxis()
    )

Vanilla HTML

In vanilla HTML, chrt-axis can be imported as an ES module, (i.e. from Skypack):

<div id="chart"></div>

<script type="module">

import Chrt from 'https://cdn.skypack.dev/chrt-core';
import {xAxis, yAxis} from 'https://cdn.skypack.dev/chrt-axis';

const chart = Chrt()
  .data([1,2,3,4,5,6])
  .add(xAxis())
  .add(yAxis())

document
    .querySelector('#chart')
    .appendChild(chart.node())

</script>

Script Tag

For legacy environments, you can load the chrt UMD bundle from an npm-based CDN such as jsdelivr:

<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/chrt@latest/dist/chrt.min.js"></script>
<script>

    chrt.Chrt()
        .node(document.getElementById('chart'))
        .data([0,1,2,3,4,5])
        .add(
            chrt.xAxis()
        )
        .add(
            chrt.yAxis()
        )
</script>

API Reference

xAxis

X Axis (xAxis) runs horizontally and it can be oriented at the bottom or top of the chart.

xAxis([tickCount[, scaleName]])

When xAxis is added without arguments, chrt builds a default axis with a computed number of ticks based on the x scale. For example:

Chrt()
    .add(
        xAxis()
    )

When xAxis is added with count, chrt builds a default axis with a suggested number of ticks based on the x scale. For example:

Chrt()
    .add(
        xAxis(5)
    )

When xAxis is added with a scaleName, chrt builds an axis by computing the ticks based on the custom scale called scaleName. For example:

Chrt()
    .add(
        xAxis(10, 'customScaleName')
    )

xAxis.width([widthValue])

If widthValue is specified, it sets the thickness of the Axis line accordingly. If widthValue is null, this function will return the thickness of the line of the Axis. If widthValue is a Number or a function, width will set the thickness of the line of the Axis. For example:

Chrt()
    .add(
        xAxis()
            .width(2)
    )

xAxis.color([colorValue])

If colorValue is specified, it sets the color of the Axis line accordingly. If colorValue is null, this function will return the color of the line of the Axis. If colorValue is a String or a function, color will set the color of the line of the Axis. For example:

Chrt()
    .add(
        xAxis()
            .color('#f00')
    )

xAxis.setTickLength([tickLength])

If tickLength is specified, it sets the length of the ticks of the Axis accordingly. If tickLength is null, this function will return the length of the ticks of the Axis. If tickLength is a Number or a function, setTickLength will set the length of the ticks of the Axis. For example:

Chrt()
    .add(
        xAxis()
            .setTickLength(5)
    )

xAxis.setTickPosition([tickPosition])

If tickPosition is specified, it sets the position of the ticks of the Axis accordingly. If tickPosition is null, this function will return the current position of the ticks of the Axis. If tickPosition is a String or a function, setTickPosition will set the length of the ticks of the Axis. The accepted values of tickPosition are inside and outside (default position). For example:

Chrt()
    .add(
        xAxis()
            .setTickPosition('inside')
            .setTickPosition('outside')
    )

xAxis.showAxis([show])

If show is specified, it sets visibility the Axis accordingly. If show is null, this function will return the current visibility of the Axis. If show is a Boolean or a function, showAxis will define whether the Axis is visible or not. For example:

Chrt()
    .add(
        xAxis()
            .showAxis(false)
    )

xAxis.hideAxis()

Shortcut for showAxis(false), when called on the Axis it will hide the axis. For example:

Chrt()
    .add(
        xAxis()
            .hideAxis()
    )

xAxis.ticks([count])

If count is specified, it suggests the count for the number of ticks the Axis accordingly. If count is null, this function will return the list of the ticks the Axis. If count is a Number or a function, ticks will define a suggested count for the number of ticks in the Axis that will be calculated by the axis scale.

Chrt()
    .add(
        xAxis()
            .ticks(10)
    )

xAxis.filter()

xAxis.showTicks()

xAxis.hideTicks()

xAxis.firstTick()

xAxis.lastTick()

xAxis.firstAndLastTicks()

xAxis.orient()

xAxis.format()

xAxis.minor()

xAxis.zero()

xAxis.hideZero()

xAxis.label()

xAxis.interval()

xAxis.title()

yAxis

Y Axis (yAxis) runs vertically and it can be oriented at the left or right of the chart.

chrtAxisRange

chrtAxisTitle