I just started to learn AnyChart and I just have completed my first chart by using it. However, I don't know why the line marker goes behind the bars. I checked the
Is there any possibility to use something like a zindex? I would appreciate your help.
Thanks a lot
Screenshot of my bar chart
When you create a line marker, you can set its appearance by using the stroke() method, like this:
var lineMarker = chart.lineMarker();
lineMarker.value(9000);
lineMarker.stroke({
thickness: 3,
color: '#7E57C2',
dash: "2 4",
});
In your case, if you want to change its z-index just call the zIndex() method on the lineMarker and on the series variable:
var series = chart.bar(data);
series.zIndex(1);
lineMarker.zIndex(2);
The bigger the index, the higher the element position is.
If you would like to learn more about marker's appearance, please check the documentation.
Related
I am coding in typescript react js and I have a highstocks graph. The problem I need help with is that I need to show the values on hover on tags (div boxes) above the graph individual to each series plotted within. The values coincide with wherever the cursor is on the graph. Please help me to achieve this.
I am attaching an image for better understanding. The dotted line on the image is where the cursor is at the moment and I want to show the values: [128.32, 49.94, 1.01] instead of '--' next to each tag name: ['Throttle Valve, Posi', 'Mill Hydr. Unit, Gri', 'Water Injection, Pos']. Thanks
Image
Inside click events, you can access the nearest point using this.hoverPoint.
chart: {
events: {
click: function() {
console.log(this.hoverPoint)
}
}
},
Demo: https://jsfiddle.net/BlackLabel/8eym6jwo/
I was able to solve this problem. Appreciate everyone who helped out.
The solution (for getting an onclick point for multiple plotted series) is as follows:
this.hoverPoints?.map((item_hoverPoints, index_hoverPoints) => {
temp_trackValues[index_hoverPoints] = Number(
item_hoverPoints?.series?.points[this.hoverPoint?.index]?.y
).toFixed(3).toString();
});
Thanks
I am trying to plot a series using a pie/radial chart to react. As per the documentation, I am passing the showAlways: true property that keeps showing a certain value in the middle of the chart even when the cursor is hovered or not hovered over the radial area.
But the following property does not seem to work in my case. Here is the link to the working snippet.
https://codesandbox.io/s/amazing-violet-wrp7y
I am not sure what's going wrong with the code here. Any help to resolve the same.
Your total.formatter function was not returning after calculating the total.
Here is the updated code
formatter(w) {
return w.globals.seriesTotals.reduce((a, b) => a + b, 0)
}
Updated CodeSandbox
I'm trying to show text with SpanLabel, but this component does not display all the text if there is line break. I then try it with TextArea and Label UIID, but the result is the same. Can someone help me on this issue? Thanks
I am having the same problem here. I use the SpanLabel inside a Dialog and the last one or two lines are always cut off.
It only happens when I use the setPreferredW property:
spanLabelDialog.setPreferredW(Display.getInstance().getDisplayWidth()-300);
Is this intended?
Somehow the setMargin property doesn't work for the dialog, neither hard-coded, nor in CSS.
Here is my code:
private void dialolg () {
String longText = "'There should be the whole text displayed here, but it seems the last one or two lines always get cut off'";
spanLabelDialog.setText(longText);
dialogExplain.add(BorderLayout.CENTER, spanLabelDialog);
spanLabelDialog.setUIID("SpanLabelDialog");
spanLabelDialog.setTextUIID("SpanLabelDialog");
spanLabelDialog.setPreferredW(Display.getInstance().getDisplayWidth()-300);
dialogExplain.show();
}
I am stuck with an issue with react-slick. The subject line may not make sense, but I will try to explain the scenario in detail. See this example fiddle to see the issue in action.
var DemoSlider = React.createClass({
getSlides(count) {
var slides = [];
for(var i = 0; i < count; i++) {
slides.push((<img key={i} src='http://placekitten.com/g/400/200' />));
}
return slides;
},
render: function() {
var settings = {
dots: false,
infinite: false,
slidesToShow: 3,
slidesToScroll: 3
}
var slides = this.getSlides(this.props.count);
return (
<div className='container'>
<Slider {...settings}>
{ slides }
</Slider>
</div>
);
}
});
In this demo, initially the slider shows 20 slides (3 per page). The idea is that if you click the button, it will generate a random number, which would be the new number of slides. The code is fairly simple and self-explanatory.
To reproduce the problem,
1. keep on clicking Next arrow until you reach the last slide.
2. click on the button that says 'Click' to generate a new random number of slides.
My expectation was that the slide will go back to the first slide but not to stay on the page where it previously was. Even worse, if the new number of slides is lower than the previous number, the user will see a blank page with no slides. On clicking Previous error, he/she can go to the previous slides, and everything works normally but the initial display ruins the user experience.
Is there something I am missing to add in the code, or is this a bug?
Thanks,
Abhi.
I would say it is rather a buggy behavior, but still you can achieve what you want by forcing a redraw after new collection has been passed as props, by resetting react's key:
<DemoSlider key={Date.now()} count={this.state.count}/>
UPDATED FIDDLE
Quick workaround: When you change to a new set of slides, remove the component, and reconstruct it again. It would then start with the first slide. You can do this by incrementing the key attribute of DemoSlider.
For a proper fix, you'd need to tell the component to change the 'current slide', so that it's not looking at a slide index beyond the end, but a casual look at the source at https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.11.0/react-slick.js suggests it currently does not allow this. A change would need to be made to InnerSlider.componentWillReceiveProps() to check state.currentSlide against props.slidesToShow and state.slideCount.
It would also benefit from allowing currentSlide to be passed as props.
I have a div that I want to make draggable or not, depending on the state of some other stuff on my page. I seem to be able to easily make it draggable, but I can't seem to figure out how to best remove the draggability from the div.
I am making it draggable with:
var dd = Ext.create('Ext.dd.DDProxy', mydiv, 'myDDGroup', { isTarget: false });
And I've tried to then remove the draggability by removing the only group it's a member of
dd.removeFromGroup('myDDGroup');
and just destroying the dd object with
delete dd;
Neither of these seem to actually keep me from starting a drag on the element. I suspect I should be able to use the b4Drag override in some way to simply cancel a drag of my div before it even begins, rather than toggling the draggable state of the div at all, but I can't seem to find docs on how I might cancel the drag during the b4Drag call.
So, how can I make a div undraggable after I have already made it draggable?
Seems to be working for me.
Here is the JSFiddle http://jsfiddle.net/01gx33h0/
var dd = Ext.create('Ext.dd.DDProxy', 'test123', 'myDDGroup', { isTarget: false });
Ext.fly('btn123').on('click', function() {
dd.removeFromGroup('myDDGroup');
});
Can you give me the sample code where it is not working. And what version of ExtJs are using?
You have to unreg. Not removeFromGroup.
It just removes from group. But events are not removed on that element.
dd.unreg();
https://fiddle.sencha.com/#fiddle/1eun
When looking at something specific that needs to be dragged, you might consider that allowing dragging is something users expect, for general ease of use you might try the ondragstart="return, this could be appended to your images, or links like so:
<a ondragstart="return false" href="#link">link</a>.