I do not see any examples of a pie chart with opacity and the fill property is not supported in pie charts as it is for bar charts. Can someone please provide an example of a pie chart with opacity or transparency setting (for the pie chart itself, not the labels)?
You can use an RGBA value when specifying the color for your data series to set transparency:
var data = [{
label: "Yes",
data: 50,
color: 'rgba(89, 120, 182, 1)'
}, {
label: "No",
data: 150,
color: 'rgba(89, 120, 182, .5)'
}];
JSFiddle Example
Related
How can I change the font color of the text below? my background is dark.
my jsfiddle: https://jsfiddle.net/theg99/2vsnmb16/1/
I did mange to change the colors of the lines with:
var line0 = container.children.push(
am5.Line.new(root, {
position: "absolute",
stroke: root.interfaceColors.get("text"),
strokeDasharray: [2, 2],
stroke: am5.color('#0xFFFFFF'), //<--I added this, but whats for text?
})
);
It looks like this should work:
subSeries.labels.template.set("fill", am5.color(0xff0000));
This changes all the labels on your second chart - is that what you're looking for?
http://codepen.io/keyboardninja/pen/WQwoRg
var content = paper.text (70, 54, "3").attr({
"font-size": "120px",
"font-weight": "600",
'fill': 'red',
});
I want the content of the triangle not to be visible outside of the triangle. The black background is the only place where the content should be visible on, not outside of that. is there a way to make something like to hide content that overflows the shape of the black triangle background ?
I have 2 ranges on the graph, so called ; green and red zones.
You can see it in the fiddle.
What I am out after is to have a graph where the green range should be between 2-4 (y-axis) specifically for the 11-13 values of x axis. Basically I would like to have 2 different ranges .
Anyone knows how to do it ?
Edit :
To make it more clear with Michel's solution; I basically would like to add another green zone that is located in up-right of the previously located green zone (let it be in x(13,16) and y(4,6) ).
Please check the newer version ;
http://jsfiddle.net/shamaleyte/4zmgrpwz/
I've created a simple plugin for Flot to use in order to get shamaleyte his desired result.
Either create a new file and copy-paste the contents in it or download the plugin
Refer to it just as every other javascript file
<script type="text/javascript" src="path/to/file.js"></script>
And add areaMarkings to the grid object in the options.
You were on the right track!
The way Flot draws the markings of the chart is simply to overlap everything! Layer upon layer upon layer.
What I've done to accomplish it is the following:
#1: First of I drew the xaxis between x=11 and x=13 for the green area. It's a giant area that spans from the y=0 all the way to y=12 on the yaxis.
#2: Then I filled in the entire yaxis between y=0 and y=2, this overlapped the green area on the yaxis to create a red area spanning from left(x=10) to right(x=15)
#3: With the bottom yaxis row being red now, I then did the exact same for the top yaxis. Once again from left(x=10) to right(x=15) I filled in the entire y=4 to y=12 with a red area.
#4: I was now left with 2 white areas on the left and right side of the green area and between the red areas. All I had to do was fill those with red aswell. I did the same as I did with the green area, draw the red areas from the bottom to top. From x=0 to x=2 and from x=13 to x=15.
....
markings: [{
xaxis: {
from: 11,
to: 13
},
color: "#D7EEE1" // Green
}, {
yaxis: {
from: 0,
to: 2
},
color: "#F2CDEA" // Red - Bottom Row
}, {
yaxis: {
from: 4,
to: 12
},
color: "#F2CDEA" // Red - Top Row
}, {
xaxis: {
from: 10,
to: 11
},
color: "#F2CDEA" // Red - Left Column
},{
xaxis: {
from: 13,
to: 15
},
color: "#F2CDEA" // Red - Right Column
}]
....
Here's an updated fiddle that I think comes close to your expectations.
Is there any way to set specific background colors for the mekko chart in jqplot?
Examples on the jqplot website always show the same set of colors.
I haven't used that particular chart in jqPlot, but this usually works for assigning colours:
series: [
{ color: "#aaff11" }, // series 1 color
{ color: "#991166" }, // series 2 color
{ color: "#33ff66" } // series 3 color (and so on)
]
where series above is a key in the options object passed to $.jqplot(id, data, options).
See the docs for more info.
How to fill color below or above the threshold. currently threshold plugin changes the line of the color but i need to fill the color on the dataseries (eg: below : 5 or above :5 ) when the line is drawing on the canvas using flot line chart. can anyone suggest me. thanks
Are you saying your fill color doesn't change above/below a certain threshold, or that you only want to show fill if it is above/below a certain threshold? If its the former, this works for me just by setting fill to true in the series options:
$.plot("#placeholder", [{
data: d1,
threshold: {
below: 5,
color: "rgb(200, 20, 30)"
}}], {
series: {
lines: {
show: true,
fill: true
}
}
});
See this fiddle for working example.