tc-angular-chartjs

WebJar for tc-angular-chartjs

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

tc-angular-chartjs
Last Version

Last Version

2.1.4
Release Date

Release Date

Type

Type

jar
Description

Description

tc-angular-chartjs
WebJar for tc-angular-chartjs
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/carlcraig/tc-angular-chartjs

Download tc-angular-chartjs

How to add to project

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

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm : chart.js jar [2.1.3,3)

Project Modules

There are no modules declared in this project.

tc-angular-chartjs

AngularJS directives for Chart.js

Build Status

Installation

Ensure you have installed Chart.js

npm

npm install tc-angular-chartjs --save

bower

Bower support has been dropped but you can still use tc-angular-chartjs with Bower using bower-npm-resolver.

download

You can download the source archive from the github releases page.

Just include dist/tc-angular-chartjs.js into your project.

Basic Usage

Add tc.chartjs to your modules dependencies e.g.

angular.module( 'app', ['tc.chartjs']);

You will then have access to the following directives:

  • tc-chartjs
  • tc-chartjs-line
  • tc-chartjs-bar
  • tc-chartjs-horizontalbar
  • tc-chartjs-radar
  • tc-chartjs-polararea
  • tc-chartjs-pie
  • tc-chartjs-doughnut
  • tc-chartjs-bubble

Just place one of these directives on a canvas element to create a Chart.js chart.

You will also want to give the chart some data, options and plugins. These can be provided via the chart-options, chart-data and chart-plugins attributes.

For data structures, options and inline plugins please refer to Chart.js documentation

You can also handle chart clicks via the chart-click attribute.

Example Pie Chart

<canvas
  tc-chartjs-pie
  chart-data="myData"
  chart-options="myOptions"
  chart-plugins="myPlugins"
  chart-click="onChartClick(event)"
></canvas>
$scope.myData = {
  // Chart.js data structure goes here
  // e.g. Pie Chart Data Structure http://www.chartjs.org/docs/#doughnut-pie-chart-data-structure
  labels: [
    "Red",
    "Blue",
    "Yellow"
  ],
  datasets: [
    {
      data: [300, 50, 100],
      backgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ]
    }
  ]
};

$scope.myOptions =  {
  // Chart.js options go here
  // e.g. Pie Chart Options http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options
};

$scope.myPlugins = [{
  // Chart.js inline plugins go here
  // e.g. http://www.chartjs.org/docs/latest/developers/plugins.html#using-plugins
}];

$scope.onChartClick = function (event) {
  console.log(event);
};

For more examples please view the demo folder.

Using the tc-chartjs directive

When using the tc-chartjs directive you will need to add an additional attribute to say which type of chart should be created.

Just attach a chart-type="" attribute to the canvas element.

<canvas
  tc-chartjs
  chart-type="doughnut"
  chart-data="myData"
  chart-options="myOptions"
></canvas>

Available Types:

  • line
  • bar
  • horizontalbar
  • radar
  • polararea
  • pie
  • doughnut
  • bubble

Passing another value to chart-type than the above will try to create a chart of that type, which is useful if you have extended Chart.js with custom chart types, e.g. through plugins.

Developing

This library is built using gulp so ensure you have it installed.

To build the dist files run the following:

npm run build

To run the tests:

npm test

To watch files and rebuild dist when changes are made:

npm start

Contributing

  • Open a Pull Request (PR)
  • Make sure your PR is on a new branch you created from the latest version of master branch
  • Please do not open a PR from your master branch
  • Open a PR even if your code is incomplete to start a discussion and to collect feedback
  • Please make sure all unit tests pass, and add new tests for any added features.

License

tc-angular-chartjs is dual licensed with the Apache-2.0 or MIT license.

See LICENSE-APACHE-2.0 and LICENSE-MIT for more details.

Versions

Version
2.1.4
1.0.16