Is there any possibility of disabling the click not to further collapse the tree or close the tree. This is the example the echarts example. See this link. I am trying this since long time. The documentation is not clear. Can anybody help me out on this? I dont want the end user to click on the circles to expand or collapse.
https://echarts.apache.org/examples/en/editor.html?c=tree-radial
Just disable mouse events with silent: true.
series: [{
//...
silent: true,
//...
}]
There is a property expandAndCollapse inside series, default value is true. Set it to false which does exactly what you asked.
Related
I've created a board game website where you are supposed to guess a word and then the points are displayed on a bar chart using chartjs. Currently, when hovering over a bar, it shows the amount of points by default. What I want to do is show both the amount of points and then also a list of what words that team have guessed correctly. So, in essence, can I change the hover text on a chartjs? And if so, how?
Thanks in advance!
I think you are referring to the tooltip which is showed when hovering the data elements.
You can change the data to show leveraging on tooltip callbacks, described in the doc: https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
plugins: {
tooltip: {
callbacks: {
label: () => 'my text'
}
}
}
The docs say that if tooltip.trigger: 'none' that the tooltip can be displayed by calling dispatchAction with type 'showTip'. But I cannot seem to get that to work. Does anyone have a snippet of working code that uses the showTip action and can show how their tooltip is configured to make this work?
I have tried with both {show: false, trigger: 'axis'} and with {show: true, trigger 'none'}. In both cases, the showTip action does nothing.
The reason I can't just use the default axis trigger {show: true, trigger: 'axis'} is because it breaks series highlighting (a bug, I assume). So I'm trying to find a way to display the tooltip anywhere the mouse goes on the chart, but without disabling highlighting.
**UPDATE: I finally gave up on EChart tooltips and ended up just creating my own. Positioning information can be obtained using the ZRender component in this way:
chartObj.getZr().on('mousemove', e => {
// mouse position within chart, in pixels
const pointInPixel = [e.offsetX,e.offsetY]
})
You have chosen the most difficult way. To show/hide tooltip you need update state of Instance:
instance.setOption({ tooltip: {show: true }}) // or show: false
Is it possible to bind 2 different tooltips on a polygon in leaflet?
One on hover and the other set to permanent.
Right now in my code it's taking only one.
You can bind any number of tooltips. Answering your specific question, you can define one tooltip to be permanent.
L.rectangle([[48.84, 2.34], [48.86, 2.36]]).bindTooltip("test", {
permanent: true
}).addTo(map);
L.rectangle([[48.84, 2.34], [48.86, 2.36]]).bindTooltip("hello", {
permanent: false
}).addTo(map););
See an example here:
https://jsfiddle.net/9d9pcL1a/
Im using Ag-grid to control my table, but i want in my group that stores a list of rows instead of having to make the row group expand in 2 clicks, i want to be on 1 click.
If i click on the icon arrow it works, but if i click on the title row it only opens on 2 clicks.
I already tried to find in the documentation any information about it, but cant find nothing.
Here is a example from the documentation.
https://ag-grid.com/javascript-grid-tree/index.php
example image:
We are now recommended not to use the onGroupExpandedOrCollapsed, so this should now be...
This will also update the icons and animate the rows, which onGroupExpandedOrCollapsed won't.
onRowClicked(params) {
params.node.setExpanded(!params.node.expanded);
}
This will toggle the expansion, use params.node.setExpanded(true) if you want the rows to just stay open.
You can listen to events on either a row or cell clicked, and expand nodes accordingly.
For example to expand a row based on a click you could do the following:
onRowClicked: (params) => {
// update the node to be expanded
params.node.expanded = true;
// tell the grid to redraw based on state of nodes expanded state
gridOptions.api.onGroupExpandedOrCollapsed(params.rowIndex)
}
This should be in the documentation - I'll update it to reflect this information.
In the column definition, you can use the onCellClicked(params) function to tell it to do something when the cell is clicked. I tried looking for an expand function, but I could only find expandAll() which I don't think you will want. So what I would do is just use jquery or simple DOM selection to click on the expand icon inside of that cell.
this one works
onRowClicked(params) {
params.context.setExpand.onExpandClicked(params.rowIndex, params.node.rowHeight);
}
We use Highcharts for our reports. On click of a chart, a new tab/window should open. I am able to achieve that by handling the click event in chart. But I am unable to make cursor as pointer.
Yes,
this is possible. See cursor.
Example (from that link).
Basically you set cursor option for the series:
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function() {
alert('You just clicked the graph');
}
}
}
}
If you want to make the whole chart clickable then you need to handle mouse hover/over. But then you may lose detail on where you are clicking (want to click series point but now you cant because you captured it on the "top" layer).