Rounded Rectangle on four side of Charts

Question

Hi Good Day,

Can we able to change the sides of charts to rounded rectangle?
Kindly refer to below:


Thank you.
Regards,
Herman.

Answer 1

Hi,

at the moment this isn't possible using the GUI of the cockpit, but you can change the css style in order to apply a border-radius to <cockpit-chart-widget> elements.
The css is in knowage/themes/commons/css/customStyle.css or you can change the SASS files and regenerate the css using a SASS compiler.

Comments

Hi Mcortella,

Thank you for your prompt reply.
I modified all the border-radius in customStyle.css and still no changes. You mean add something like "border-radius= 50px" in the <Cockpit-chart-widget>? or Could guide me to add in which line? 

Regards,
Herman.

---

Hi,

this is correct but you need to add also a overflow: hidden property to the same class.

---

Sorry, my bad. I didn't saw that you were editing the wrong css class. You need to add this class to the css:

.kn-cockpit cockpit-chart-widget chart-renderer {

border-radius: 50px;

overflow: hidden;

}

So the final result will be something like this:

---

Hi Mcortella,

I've added the css class and restart the server. I don't see any changes.
Can you share your css? Appreciate your help.

Thank you.
Regards,
Herman.

---

Could you please copy your css here and then post the link? https://pastebin.com/

---

Also remember to clean the browser cache and check that the css is correctly updated in the published file in the web server.

---

Hi Mcortella,

Posted. Here's the link https://pastebin.com/CfJSkYik
I've cleaned browser cache. How can i check that file already published in the web server?

Thank you
Regards,
Herman.

---

Have a look in the application server and search for the css in the knowage web app. For what I see the css seems good:

---

Hi Mcortella,

Appreciate your help.
I modified the current standard css and replaced it in the server \Knowage-Server-CE\webapps\knowage\themes\commons\css.
For what i understand the system will auto generate/read from the modified css, right? or do we must do something else? like the customStyle.css need to copy to specified location.

Thank you.
Regards,
Herman.

---

Hi Mcortella,

I can see the changes but why not all the charts in cockpit?
Kindly refer to below:

Thank you.
Regards,
Herman.

---

Hi Mcortella,

Solved, I found out due to the style background color must be same as the main background color.
Thank you.

Regards,
Herman.