TeeChart for JavaScript for the HTML5 Canvas
-
Microsolutions
- Newbie
- Posts: 10
- Joined: Tue May 10, 2016 12:00 am
Post
by Microsolutions » Wed May 18, 2016 8:53 am
Hello,
please check the following code:
Code: Select all
<!DOCTYPE html>
<head>
<title>Bar Transparency</title>
<script type="text/javascript" src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js"></script>
<script type="text/javascript">
function draw() {
var Chart1=new Tee.Chart("Canvas1");
Chart1.title.text="Bar Transparency";
var Series1=Chart1.addSeries(new Tee.Bar());
Series1.colorEach="no";
Series1.format.fill="rgba(243,156,53,0.05)";
Series1.data.values=[10,5];
Series1.data.x=[1,2];
Series1.marks.visible=true;
Series1.format.gradient.visible=false;
Chart1.draw();
}
</script>
</HEAD>
<BODY onload="draw()">
<canvas id="Canvas1" width="800" height="600">
This browser does not seem to support HTML5 Canvas.
</canvas>
</BODY>
</HTML>
The bar borders and the marks do not apply the transparency. Check it, please.
Thanks in advance and best regards,
MS
-
Yeray
- Site Admin
- Posts: 9614
- Joined: Tue Dec 05, 2006 12:00 am
- Location: Girona, Catalonia
-
Contact:
Post
by Yeray » Thu May 19, 2016 9:13 am
Hello,
Microsolutions wrote:The bar borders and the marks do not apply the transparency. Check it, please.
There are different properties for the series brush (format.fill), the series pen (format.stroke.fill), marks (marks.format.fill) and marks shadow (marks.format.shadow.color). Ie:
Code: Select all
var transp = 0.5;
Series1.format.fill="rgba(243,156,53,"+transp+")";
Series1.format.stroke.fill="rgba(0,0,0,"+transp+")";
Series1.marks.format.fill = "rgba(245,245,220,"+transp+")";
Series1.marks.format.shadow.color="rgba(80,80,80,"+transp+")";
-
Microsolutions
- Newbie
- Posts: 10
- Joined: Tue May 10, 2016 12:00 am
Post
by Microsolutions » Thu May 19, 2016 12:04 pm
Hello,
thanks for the explanation, it works fine now.
Best regards,
MS
