Here chart.js is doing all the hard work for us building the dynamic charts. The main point of this tutorial is to go through how we can use data from sub fields inside an ACF repeater field as data points for the chart.
This tutorial will walkthrough the following steps;
- Setting up a repeater field in ACF for the data.
- Enqueueing Chart.js and initializing
- Localizing to use the ACF data in the JS
- Adding to Oxygen templates using a <canvas> element.
- Customising the chart using the settings
Setting up a repeater field in ACF
In the demo, we have four sub fields inside a repeater field. One for the months (the x-axis) and then the rest are the data points for the line graphs. The y-axis is added dynamically, depending on the highest and lowest values added.
The Field Group looks like this. A text field (month) for the months and number fields (data_point_1, data_point_2, data_point_3) for all the data points.
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $599 one-time).
Already a member? Log in below or here.