We're in beta! Don't mind the bugs.

Helpful resources

Need more help?

Check out the Webflow community.

Free Webflow templates

The best free Webflow templates.

Hire a Webflow expert

Partner with a certified expert.

Rate this answer

Share

How can I adapt PixelGeek's code to have another graph on the same page in Webflow?

Published on

September 22, 2023

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

If you want to adapt PixelGeek's code to have another graph on the same page in Webflow, you can follow these steps:

Duplicate the existing graph code:

Open the page in the Webflow Designer.
Locate the existing graph on the canvas.
Select the graph element and duplicate it.
You now have a copy of the graph code to work with.

Modify the graph ID:

Select the duplicated graph element and open the settings panel.
In the element settings, locate the ID field.
Modify the ID to make it unique. For example, you can add a number or a descriptive term to differentiate it from the original graph.

Customize the graph data:

Open the custom code section where PixelGeek's graph code is located.
Find the specific code that defines the data for the graph.
Modify the data values to reflect the new graph you want to display.
Make sure to use the ID of the duplicated graph element in the code, instead of the original graph ID.

Style the new graph:

If you want the new graph to have a different style, you can customize its appearance using CSS.
Add appropriate CSS selectors to target the duplicated graph element.
Modify the CSS properties to achieve the desired style.

Position and layout the new graph:

Drag and position the duplicated graph element on the canvas wherever you want it to appear.
Adjust any surrounding elements or layout to accommodate the new graph.

Preview and publish:

Preview the page to see how the new graph appears alongside the original one.
Make any necessary adjustments to the graph or page layout.
Once you're satisfied, publish the page for the changes to take effect on the live site.

By following these steps, you can successfully adapt PixelGeek's code to have another graph on the same page in Webflow.

Additional Questions:

How do I duplicate an element in Webflow?
Can I customize the style of a graph in Webflow?
What code should I modify to change the data for a graph in Webflow?

Where can I specify a size in the custom code used to customize the lightboxes in Webflow?

How can I create a workflow in Webflow that allows users to submit their email before downloading an ebook from a gallery?

Is there a way to paste an element directly to the top of a group in Webflow without having to manually drag it to the top every time?

How can I delete the last slide in a slider in Webflow if there are only 5 images in it?

Are variable controls supported for the Adobe font Stinger in Webflow, or am I doing something wrong?

Is there currently a bug in Webflow where the cursor does not become a pointer over a link even when the z-index is increased?

Is there a solution in Webflow that allows for the creation of an overlay window that pops up on any page the user enters and only appears once per session?

How can I prevent the preflight requests and only make a single POST request in Webflow when submitting a form using ajax in custom code?

What could be causing the discrepancy in margin conversion from pixels to em on Webflow using the Wizardry method and plugin?

Are there any known issues with the sorting functionality in Webflow's Designer when using Masonry.js on a CMS collection?