Have a area type series with a red brush and 0.25 areaFillOpacity. when the legend is rendered the badge is drawn as solid red and looks very different to the data which is 1/4 opacity. can I fix this or is it something you can fix.
as per attached
Another thing is that I'm using the area type graph to colour the background of certain parts of the graph using a column of data, however would like the area to have vertical lines on the change over from 0 to 1. however the graph comes up with slightly diagonal, I know this is the case cause the data has moved along one increment along to x-axis. Anyway of easily change the results to what I want?
Hello David,
I'm glad you have resolved your issue.
If you have any other questions, please do not hesitate to ask.
Thank you,Mihoko Kamiishi
You accidentally solved my other problem, don't zero zero values, use null instead
For the second question, I'm not sure what you mean by "slightly diagonal".
Is it reproducible with the sample I provided as well?
Can you please let me know more in detail about the appearance you are expecting?
That worked a charm for the legend.
Any ideas for the second question?
In order to apply opacity to the legend badge, I suggest you modify its canvas element directly and change the fillStyle there.
Assuming that the target badge is the first item in the legend, you can get to the legend marker in the DOM, get the color information, and redraw the element like below.
----------------------- var ctx = $(".ui-chart-legend-item-badge > canvas")[0].getContext("2d"); var badgeColor = ctx.getImageData(3, 3, 3, 3).data
ctx.fillStyle = "rgb(255,255,255)"; ctx.fillRect(0, 0, 17, 17); ctx.fillStyle = "rgba("+badgeColor[0]+", "+badgeColor[1]+","+badgeColor[2]+", 0.25)"; ctx.fill(); -----------------------
I have created a sample project for you.
Let me know if I may be of further assistance.