Discussions
Categories
Groups
Community Home
Categories
INTERNAL ENABLEMENT
POPULAR
THRUST SERVICES & TOOLS
CLOUD EDITIONS
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>
