To use graph animation, use the “daniel-graph” class name for the parent/container element.
To create a bubble effect, you can adjust the count of bubbles. Refer to the example below:
<div class="daniel-graph" data-daniel-type="graph" data-daniel-graph-xcount="25" data-daniel-graph-ycount="25" data-daniel-graph-radius="4" data-daniel-graph-spacing="10" data-daniel-graph-fillColor="rgb(120,120,120)">...</div>
Alternatively, if you prefer to create the graph with fixed width and height, you can follow a different approach. Refer to the example below:
<div class="daniel-graph" data-daniel-type="graph" data-daniel-graph-radius="5" data-daniel-graph-spacing="10" data-daniel-graph-width="360" data-daniel-graph-height="520"></div>
data-daniel-graph-xcount and data-daniel-graph-ycount
These attributes allow you to control the number of bubbles in the graph. The data-daniel-graph-xcount attribute represents the count of bubbles along the x-axis, while the data-daniel-graph-ycount attribute represents the count of bubbles along the y-axis.
If you are using the data-daniel-graph-width and data-daniel-graph-height attributes to specify a fixed width for the graph, you don’t need to use xcount and ycount. The script will automatically calculate the appropriate number of bubbles based on the chosen width.