Adding rounded edges to a Card Chart

Owned by Karen Hogan (Unlicensed)
Jul 04, 2022
2 min read

If you want your Card Chart to look a bit different to the standard type of Card Chart you could make the edges rounded.

If you want to format a Card chart to look like this example, please follow the instructions listed below:

Create your Card Chart and in Chart Editor, click the ‘Config’ icon at the top of the page.

In the ‘Config’ screen, click ‘Styles’. You will need to make changes to .pi-style__chart-panel and .pi-style__chart-panel__header .paper-button.

In the screenshot below, we added a border-radius of 25px (this can be any number you want) to .pi-style__chart-panel. This setting will make all corners of the chart panel rounded.

We also added a border radius of 25px 25px 0px 0px to .pi-style__chart-panel__header .paper-button.. This setting will make the corners of the title area rounded. The first two numbers (25px 25px) will change the top-left and top-right corners of the title field and the final two numbers (0px 0px) will change the bottom-left and bottom-right corners of the title field.

To make the card stand out on the category, we added a background colour and in this example, we chose white but you can use any colour option you want. We added the background colour to both of the css classes mentioned above.