/WordPress-Charts.js-Line-Graph-and-Advanced-Custom-Fields

Wordpress: using Charts.js and Advanced Custom Fields to have dynamic line graphs that can be easily edited in the WordPress back-end.

Primary LanguageJavaScript

Wordpress Code Snippet: using Charts.js and Advanced Custom Fields to have website charts that can be easily edited in the WordPress back-end.

Dependencies:

  • Advanced Custom Fields plugin installed and activated in WordPress
  • A repeater field with a number sub-field created in ACF
  • Chart.js installed, in this example I'm using Chart.js 2.5.0

In this example, we have a line graph with two lines that is referencing data points from an ACF repeater number sub-field to display the chart.

Here's the final product, please note, this snippet only shows how to build out the chart, not how to add the caption: