enter image description here See in the example, when I don't have blue data then border-radius should come on black part in the last case. How I can achieve that??
Add border radius on black part if blue is hidden
The problem here is that setting a borderRadius for a single point is not possible according to Highchart's API. You can only set a borderRadius for the whole series. Splitting your points into several series would work, but I'm not sure if the whole demo still makes sense.
API reference: https://api.highcharts.com/highcharts/series.bar.borderRadius
Related
I need to show a graph in my iOS app something like
We have been using CorePlot for all the graphs and now I need to add a new kind as shown above. I found I could draw a graph like the above with CPTRangePlot. My problem is I can only draw a horizontal graph as shown below.
Is there any way to make it vertical? For a single curve we can easily do that by switching the value on X-axis and Y-axis. But for this kind of "range plot", I could not find a way to make it work for drawing the upper-bound and lower-bound lines and filling range with color can only be achieved on a normal horizontal graph. And yes, I can easily rotate the container view by 90 degrees, as I did in my testbed app. But I just cannot do this in our current app because this new added "range plot" graph is not the only one on the view. We have many other curves sharing the same plot space. So is there any hidden property or method to achieve the job? Thanks in advance!
I just added a fillDirection property to the range plot to enable this feature. You'll need to use the latest code from the release-2.3 branch.
Here is chart http://jsfiddle.net/erzLp3n9/2/
I need to remove color as this image is seems
this image
I have two different series.
I do not want to use area-stacked and arearange because that two different series is dynamic.
I had try by this http://jsfiddle.net/erzLp3n9/3/ but not working
By using negativeFillColor you can color the area if it is negative, which seems to be the problem with your second example.
See this fiddle.
Where I set plotOptions.area.negativeFillColor.
If you are wondering why they don't look like the same color, it is because the top one is 75% opacity, see Highcharts API.
Could you explain exactly why you do not want to use stacking? This option along with setting color of the second series to transparent gives desired effect.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.stacking
Example:
http://jsfiddle.net/xhx34mvg/
I have previously used core plot and jawbone line chart view but now I want grid (background) on graph.
I wanna make exactly like above image any help would be appreciated and also please be specific while posting some third party libs and all.
How can I achieve the above graph (if selected dot/value to show callout) with callout?
Note- In X- axis (dates) and Y- axis (values) are there.
Edit 1:
Is it possible to achieve in core plot? If Yes, How and please be specific.
Thanks in advance.
You can use a plot space annotation to label the callouts. A simple rounded rectangle shape for the labels is easy—set the fill, borderLineStyle, and cornerRadius of the Core Plot text layer used for the annotation. If you need the little arrow on the side of the annotation, you should be able to draw that by using a stretchable image for the fill.
I have chart showing time data. I have two points back in time which I need to "mark" in the chart.
I currently indicate these two by plotlines, but would like to show bar, with let's say green and blue bars showing the timespans (for example -13days from now with blue and -90days -> -13days with red).
I would use plotBands, but I can't specify their height and do not want to have them all over the chart.
Is there some way? I saw something about translating pixels and drawing rectangle, but wasn't able to make it work. Also - I zoom a lot in this chart.
You can use Renderer and add custom shape. In other cases, please attach mockup of your goal.
http://api.highcharts.com/highstock#Renderer
I've added a gradient to my scatter plot in the usual manner:
CPTFill areaGradientFill = [CPTFill fillWithGradient:areaGradient1];
boundLinePlot.areaFill = areaGradientFill;
boundLinePlot.areaBaseValue = 0;
Setting the minimum for the gradient is easy to do with the areaBaseValue property. However, the gradient will always stretch such that the entire range of color defined by areaGradient1 appears below the line plot.
What I'd like to do is set an absolute y-axis range (e.g., 0 to 100) and have the gradient always be set to that range. So if my line is at y=50, only the bottom 50% of the gradient would be rendered below the line. I thought setting boundLinePlot.areaBaseValue2 = 100; would do this, but it doesn't have any effect.
Does CorePlot support this? If not, what's the 'right' way to go about implementing it?
(This is my first question so apologies if I'm not clear. Be gentle. :) )
While there's no direct way to make this happen you could use a trick. Make your horizontal global range wider than what you would show normally and do not make the graph horizontally scrollable. Add a value to the graph in the hidden area that is always your maximum value. This will be filled with the full gradient. Other parts however will only get a partial gradient, depending on their height.
I found this trick by accident while looking at one of my graphs. Look:
The overview at the top shows where the big graph is currently (the green limit band). Now compare this with another part:
You can clearly see that the tip of the large value has a different gradient value as the tip of the smaller one.
You can use a "background limit band" to draw a fill at a certain size behind the plots, but that won't be clipped to the plot line.