Discussions
Categories
Groups
Community Home
Categories
INTERNAL ENABLEMENT
POPULAR
PUBLIC CLOUD
PRIVATE CLOUD
Quick Links
MY LINKS
HELPFUL TIPS
Back to website
Home
Intelligence (Analytics)
rounded corners on chart container
DQM
I created a standalone chart in BDpro 4.4 and would like the container it sits in to have rounded corners.<br>
There is no style element to support that.<br><br>
So how can I achieve that?
Find more posts tagged with
Comments
Clement Wong
<p>For the HTML5 charts, the rounded corners for the container can be changed via the UI, and also can be set in a Theme.</p>
<p> </p>
<p>The setting is <em>Edit Chart > Format Chart > Chart Area > Outline > Inset (Points</em>). Uncheck "Auto" and check Outline > Visible to as a starting point.</p>
<p> </p>
<p>
DQM
Thanks!
DQM
<p>Oops.</p>
<p>I tried your solution, but did not get the expected result, turning off auto and setting the inset (points) values to 10 (all four corners) or 45 did not make a difference.</p>
<p>So I tried it using css3 on a .chart element (property border-radius) -see below-, but no joy there either. The css did produce a 10px line around the chart though. But with square corners.</p>
<p style="font-size:11px;font-family:Monaco;color:rgb(78,145,146);">.chart<span style="color:rgb(0,0,0);"> {</span></p>
<p style="font-size:11px;font-family:Monaco;"> </p>
<p style="font-size:11px;font-family:Monaco;color:rgb(147,33,146);">font-size<span style="color:rgb(0,0,0);">: </span><span style="color:rgb(57,45,231);">small</span><span style="color:rgb(0,0,0);">;</span></p>
<p style="font-size:11px;font-family:Monaco;color:rgb(147,33,146);">font-weight<span style="color:rgb(0,0,0);">: </span><span style="color:rgb(57,45,231);">bold</span><span style="color:rgb(0,0,0);">;</span></p>
<p style="font-size:11px;font-family:Monaco;color:rgb(147,33,146);">font-style<span style="color:rgb(0,0,0);">: </span><span style="color:rgb(57,45,231);">italic</span><span style="color:rgb(0,0,0);">;</span></p>
<p style="font-size:11px;font-family:Monaco;color:rgb(57,45,231);"><span style="color:rgb(147,33,146);">color</span><span style="color:rgb(0,0,0);">: </span>#5C6C7B<span style="color:rgb(0,0,0);">;</span></p>
<p style="font-size:11px;font-family:Monaco;color:rgb(147,33,146);">border-color<span style="color:rgb(0,0,0);">: </span><span style="color:rgb(57,45,231);">#000000</span><span style="color:rgb(0,0,0);">;</span></p>
<p style="font-size:11px;font-family:Monaco;color:rgb(147,33,146);">border-radius<span style="color:rgb(0,0,0);">: </span><span style="color:rgb(57,45,231);">25px</span><span style="color:rgb(0,0,0);">;</span></p>
<p style="font-size:11px;font-family:Monaco;color:rgb(147,33,146);">border-style<span style="color:rgb(0,0,0);">: </span><span style="color:rgb(57,45,231);">solid</span><span style="color:rgb(0,0,0);">;</span></p>
<p style="font-size:11px;font-family:Monaco;color:rgb(147,33,146);">border-width<span style="color:rgb(0,0,0);">: </span><span style="color:rgb(57,45,231);">10px</span><span style="color:rgb(0,0,0);">;</span></p>
<p style="font-size:11px;font-family:Monaco;">}</p>
<p style="font-size:11px;font-family:Monaco;"><span style="font-family:'Helvetica Neue', Arial, Verdana, sans-serif;font-size:14px;">Any idea what I should do?</span></p>
Clement Wong
<p>Here is a screenshot of the output from my sample report. Exporting to PDF produced the same. Is this rounded corners the same as your requirement?</p>
<p> </p>
<p>
DQM
<blockquote class="ipsBlockquote" data-author="Clement Wong" data-cid="137304" data-time="1434866903" data-date="21 June 2015 - 09:08 AM"><p>
(...)Is this rounded corners the same as your requirement?<br><br><img src="
http://developer.actuate.com/community/forum/public/style_images/developer_actuate_images/attachicon.gif"
; alt="attachicon.gif"><a class="bbc_url" href="
http://developer.actuate.com/community/forum/index.php?app=core&module=attach§ion=attach&attach_rel_module=post&attach_id=11833">HTML5
Charts w Rounded Corners.png</a></p></blockquote>
I got the same round corners as you, but I need them to be more rounded: when I set the insets to "45" for all four corners instead of "10" I expected the inset to change visibly, but changing that setting did not change anything at all. <br>
So I'm puzzled.<br>
I also don't understand why the css3 border-radius declaration doesn't do anything.
Clement Wong
<p>Insets control the position of the chart itself, and not the rounded corner.</p>
<p> </p>
<p>You can control the rounded corner width via script (<em>Edit Chart > Script > Client Script</em>) via <a data-ipb='nomediaparse' href='
http://api.highcharts.com/highcharts#chart.borderWidth'>borderRadius</a>.</p>
;
<pre class="_prettyXprint">
beforeGeneration: function(options)
{
options.chart.borderRadius = 30;
},</pre>
DQM
<blockquote class="ipsBlockquote" data-author="Clement Wong" data-cid="137368" data-time="1435105694">
<div>
<p> </p>
<p>Insets control the position of the chart itself, and not the rounded corner.</p>
<p> </p>
<p>You can control the rounded corner width via script (<em>Edit Chart > Script > Client Script</em>) via <a data-ipb='nomediaparse' href='
http://api.highcharts.com/highcharts#chart.borderWidth'>borderRadius</a>.</p>
;
<pre class="_prettyXprint">
beforeGeneration: function(options)
{
options.chart.borderRadius = 30;
},</pre>
</div>
</blockquote>
<p> </p>
<p>Thank you! Works like a charm
</p>
