JarCasting
JarCasting JarCasting

chartist-plugin-axistitle

WebJar for chartist-plugin-axistitle

License

License

MIT
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

chartist-plugin-axistitle
Last Version

Last Version

0.0.4
Release Date

Release Date
Type

Type

jar
Description

Description

chartist-plugin-axistitle
WebJar for chartist-plugin-axistitle
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/alexstanbury/chartist-plugin-axistitle

Download chartist-plugin-axistitle

Filename Size
chartist-plugin-axistitle-0.0.4.pom
chartist-plugin-axistitle-0.0.4.jar 9 KB
chartist-plugin-axistitle-0.0.4-sources.jar 22 bytes
chartist-plugin-axistitle-0.0.4-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/chartist-plugin-axistitle/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>chartist-plugin-axistitle</artifactId>
    <version>0.0.4</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/chartist-plugin-axistitle/
implementation 'org.webjars.npm:chartist-plugin-axistitle:0.0.4'
// https://jarcasting.com/artifacts/org.webjars.npm/chartist-plugin-axistitle/
implementation ("org.webjars.npm:chartist-plugin-axistitle:0.0.4")
'org.webjars.npm:chartist-plugin-axistitle:jar:0.0.4'
<dependency org="org.webjars.npm" name="chartist-plugin-axistitle" rev="0.0.4">
  <artifact name="chartist-plugin-axistitle" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='chartist-plugin-axistitle', version='0.0.4')
)
libraryDependencies += "org.webjars.npm" % "chartist-plugin-axistitle" % "0.0.4"
[org.webjars.npm/chartist-plugin-axistitle "0.0.4"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

Axis title plugin for Chartist.js

This plugin allows the creation and placement of axis titles. The plugin will throw an error if it is applied to a chart that contains no axes, such as a Pie chart.

In order to use it, you will need to include the excellent charting library Chartist.js in your page.

http://gionkunz.github.io/chartist-js/index.html

Installation

Install using npm:

npm install chartist-plugin-axistitle

Available options and their defaults

var defaultOptions = {
  // The title to be displayed on the axis. If at least one axis title is not supplied then an error is thrown.
  // This can also be passed a function to enable simple updating of the title if your chart data changes.
  axisTitle: "",

  // One or more class names to be added to the axis title.
  // Multiple class names should be separated by a space.
  // This can also be passed a function to enable simple updating of the classes if your chart data changes.
  axisClass: "ct-axis-title",

  // How much to offset the title by.
  // Please note, x and y offset values for axisY are flipped due to the rotation of the axisY title by 90 degrees.
  // Therefore changing the x value moves up/down the chart, while changing y moves left/right.
  offset: { x: 0, y: 0 },

  // Defines the anchoring of the title text. Possible values are 'start', 'end' and 'middle'.
  textAnchor: "middle",

  // Whether to flip the direction of the text. Note - This can only be used on axis Y.
  flipTitle: false
};

Sample usage

var chart = new Chartist.Line(
  ".ct-chart",
  {
    labels: [
      "0-15",
      "16-30",
      "31-45",
      "46-60",
      "61-75",
      "76-90",
      "91-105",
      "106-120"
    ],
    series: [[1, 3, 7, 12, 1, 2, 1, 0]]
  },
  {
    chartPadding: {
      top: 20,
      right: 0,
      bottom: 20,
      left: 0
    },
    axisY: {
      onlyInteger: true
    },
    plugins: [
      Chartist.plugins.ctAxisTitle({
        axisX: {
          axisTitle: "Time (mins)",
          axisClass: "ct-axis-title",
          offset: {
            x: 0,
            y: 50
          },
          textAnchor: "middle"
        },
        axisY: {
          axisTitle: "Goals",
          axisClass: "ct-axis-title",
          offset: {
            x: 0,
            y: -1
          },
          flipTitle: false
        }
      })
    ]
  }
);

Example

Install using npm install then run/edit the example.html file to see the plugin in action.

Build

Use npm run build to build a minimised version.

Versions

Version
0.0.4
0.0.1