ChartJS
Overview
Chart.js is a popular JavaScript library for creating interactive and visually appealing charts and graphs on web pages. It provides a simple and flexible way to include various types of charts, such as line charts, bar charts, radar charts, doughnut charts, and more, in your web applications.
we will continue to update often
Blocks
Methods
Bar graph
A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
loading block...
| Input Params | Type | Description |
|---|---|---|
| Target | ComponentInstance | target element to hold the the bar graph example: horizontal arrangement , vertical arrangement, cards etc |
| Options | Any | options to style the graph |
| Data | Any | Provide data as per the chartjs official docs or use default block to preview the output |
Bubble graph
A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.
loading block...
| Input Params | Type | Description |
|---|---|---|
| Target | ComponentInstance | target element to hold the the bubble graph example: horizontal arrangement , vertical arrangement, cards etc |
| Options | Any | options to style the graph |
| Data | Any | Provide data as per the chartjs official docs or use default block to preview the output |
Doughnut graph
Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their cutout. This equates to what portion of the inner should be cut out. This defaults to 0 for pie charts, and '50%' for doughnuts.
loading block...
| Input Params | Type | Description |
|---|---|---|
| Target | ComponentInstance | target element to hold the the doughtnut graph example: horizontal arrangement , vertical arrangement, cards etc |
| Options | Any | options to style the graph |
| Data | Any | Provide data as per the chartjs official docs or use default block to preview the output |
Pie graph
Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their cutout. This equates to what portion of the inner should be cut out. This defaults to 0 for pie charts, and '50%' for doughnuts.
loading block...
| Input Params | Type | Description |
|---|---|---|
| Target | ComponentInstance | target element to hold the the pie graph example: horizontal arrangement , vertical arrangement, cards etc |
| Options | Any | options to style the graph |
| Data | Any | Provide data as per the chartjs official docs or use default block to preview the output |
Line graph
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
loading block...
| Input Params | Type | Description |
|---|---|---|
| Target | ComponentInstance | target element to hold the the line graph example: horizontal arrangement , vertical arrangement, cards etc |
| Options | Any | options to style the graph |
| Data | Any | Provide data as per the chartjs official docs or use default block to preview the output |
Mixed graph
With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset.When creating a mixed chart, we specify the chart type on each dataset.
loading block...
| Input Params | Type | Description |
|---|---|---|
| Target | ComponentInstance | target element to hold the the mixed graph example: horizontal arrangement , vertical arrangement, cards etc |
| Options | Any | options to style the graph |
| Data | Any | Provide data as per the chartjs official docs or use default block to preview the output |
Polar graph
Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
loading block...
| Input Params | Type | Description |
|---|---|---|
| Target | ComponentInstance | target element to hold the the polar graph example: horizontal arrangement , vertical arrangement, cards etc |
| Options | Any | options to style the graph |
| Data | Any | Provide data as per the chartjs official docs or use default block to preview the output |
Radar graph
A radar chart is a way of showing multiple data points and the variation between them.They are often useful for comparing the points of two or more different data sets.
loading block...
| Input Params | Type | Description |
|---|---|---|
| Target | ComponentInstance | target element to hold the the radar graph example: horizontal arrangement , vertical arrangement, cards etc |
| Options | Any | options to style the graph |
| Data | Any | Provide data as per the chartjs official docs or use default block to preview the output |
Scatter graph
Scatter charts are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 points.
loading block...
| Input Params | Type | Description |
|---|---|---|
| Target | ComponentInstance | target element to hold the the scatter graph example: horizontal arrangement , vertical arrangement, cards etc |
| Options | Any | options to style the graph |
| Data | Any | Provide data as per the chartjs official docs or use default block to preview the output |
Default
Returns: String
Assign a default view options for all the graphs to preview the visualisation.
loading block...