- Charts can be implemented in many ways, and as such, can be edited in many ways
The First method is to simply take a screenshot of the chart, edit it in any image editing software, and then re-upload the edited image into Demoboost as the replacement. (Editing Image)
Effortlessly kickstart your journey with our beginner-friendly guides!
Step 1: Open up the demo in the Editor
Step 2: Take a screenshot of the chart
Step 3: Open up the screenshot in any image editing software and make your changes, then save the new image.
Step 4: In Demoboost Editor, click on the chart and choose Change
Step 5: Upload your modified chart image
The Second method is with CSS & inspector, ("Introduction to Inspector" guide)
Step 1: Open up the demo in the Editor
Step 2: Right-click the chart part you'd like to change and click on Inspect
Step 3: Make sure the correct part is selected by hovering over it in the inspector and checking the blue outline in the Editor
Step 4: Change the colour by adding the stroke: [COLOR]; and fill: [COLOR]; properties. Refer to the chart style infographic.
Step 5: For the legend, you can add the background-color and border-color properties (refer to the chart style infographic).
- If neither of the above options is feasible (as some charts may not be easily stylized with CSS or replaced with images), you can try using the 'filter: hue-rotate()' CSS property on the chart's container. This property allows you to adjust the color of the content. Experiment with different values until you achieve the desired effect
