Chart.js Plugin

The Chart plugin is powered by Chart.js, a Simple yet flexible JavaScript charting for designers & developers.

The plugin is available both for Web and Mobile Projects.

The Chart.js official documentation can be found here: https://www.chartjs.org/docs/latest/

Some Chart examples

Using Chart.js plugin

In order to use this plugin, you must install it and activate it from the project parameters (Read the Plugin Installation documentation for more details)

Chart.js Plugin implementation example.

Plugin Settings

By double-Clicking on the plugin, you can setup the initial settings:

• Aspect-Ratio Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas)
  

• Border Width The Border width in Px
  

• Data-label The main label of the Chart
  

• Data-set-colors The colors for the initial dataset (eg. Red|Blue|Yellow|Green|Purple|Orange ) . Colors must be separated with a pipe (|) and can be Hex, RGB-RGBA or Constants Colors (eg. #00000 , rgb(12,23,54), rgba(67,87,124,0.5), red )
  

• Data-set-data The values for the initial dataset (eg. 12|19|3|5|2|3 )
  

• Data-set-labels The labels for the initial dataset (eg. 2001|2002|2003|2004|2005|2006 )
  

• Fill true-false, a value of true will draw plain colors bars/pie...
  

• Legend-displayed true-false, a value of true will display the Chart legend
  

• Legend-fontcolor the text color for the legend
  

• Legend-fontsize the text size for the legend in px
  

• Legend-fullwidth true-false, a value of true will show the legend at 100% width
  

• Legend-position top or bottom
  

• Maintain-aspect-ratio true or false, a value of true will keep the Graph aspect ratio when the layout size is changing
  

• Responsive true or false , a value of true will make the Chart layout responsive
  

• Show Lines true or false , a value of true will display Chart lines
  

• Title-display true or false , a value of true will display the Chart title
  

• Title-fontsize the Chart title size in px 
  

• Title-position the Chart title position: top or bottom
  

• Title-text the Chart title
  

• Type the Chart type: line || bar || radar || pie || doughnut || polarArea || bubble || scatter
  

Changing Chart dataset dynamically

You can add remove change your Chart dataset dynamically with a very simple lines of code.

The Plugin is represented by a js Object with some public methods and properties. The name of the object instance is chartJS

• Changing Chart Type 
  chartJS.changeChartType(id, type); where id is the ID of the plugin in the page, and type is one of the Chart type values (line, bar …)
  Example: chartJS.changeChartType("MyGraph", “radar");
  

• Clear a Chart
  chartJS.clearChart(id); where id is the ID of the plugin in the page
  

• Add new data point To Chart
  chartJS.addDataPoint(“myChart", 0, “label", “value", “color");
  

• Replace a data point in Chart
  chartJS.replaceDataPoint(id, dataSet, index, label, value, color);
  

• Add new dataset To Chart
  chartJS.addDataSet(“pluginID", dataSet, dataColors, dataLabels);
  Example: chartJS.addDataSet("pluginID", "12|19|3|5|2|3", "Red|Blue|Yellow|Green|Purple|Orange", "2001|2002|2003|2004|2005|2006");
  

• Getting a Chart object Reference
  chartJS.getChartInstanceFromId(“MyId”);
  This function return an object that is an internal reference to the Chart.js object, it will let you access to all the functionalities available with Chart.js (Read the documentation at https://www.chartjs.org/docs/latest/ for more details )