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
Good
Good
Bad
Bad
Share
All posts
Custom code

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

Published on
September 22, 2023
Note
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:

  1. 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.
  1. 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.
  1. 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.
  1. 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.
  1. 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.
  1. 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?
How can continuous numbering be achieved in an ordered list with paragraphs in between list items in Webflow?
What is the issue with the hero images on the website when clicking on URLs in Webflow?
How can I add Recaptcha V2 to a Webflow form and modify the PHP script for form handling?
Is it possible to have Webflow go back to the last tab visited instead of redirecting to the first tab when the browser back button is clicked?
What suggestions did you follow in order to implement fullpage.js into your site and resolve the issue with the anchor links not working?
Is there a way to change the size of the Vimeo video displayed in the Video Lightbox on Webflow?
How can I modify the Current class in Webflow so that the background color of the link on the contact us page matches the Services link but with underlined text?
When adding a custom domain on Webflow using Google Domains, why is the website redirecting to www.www.domain.com instead of domain.com?
How can I make the background image on the Arch Photography page in Webflow not scroll?
Is it possible to customize the styling of links created in Rich Text fields in Webflow CMS?
Home
Categories
Tutorials
© 2023 CommunityFAQ. All rights reserved.
TermsPrivacyCookies
CommunityFAQ is not affiliated with Webflow. This is a personal project to help answer Webflow's questions and a test project to implement new strategies while working with larger a larger CMS. CommunityFAQ is reader-supported and some links may be affiliate links.