I am using bubble charts in angular-charts (its based on charts.js)
Users have to hover on bubbles to know their labels
How can I either show labels or turn on tooltips permanently in bubble chart
Premraj
You need to specify it within the options of Chartjs, specifically the callback part. I've given an example of what that looks like. Chart JS Documentation
vm.options = {
"callbacks": {
"label": function (tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label;
}
}
Related
I've started using SwiftUI and trying to convert an application that I've created with Jetpack Compose to iOS, but I've run into a problem with menus (or picker if that's easier).
What I want to do is to be able to create items that has multi-lines and different font size for the two lines. But I can't make it work, only the first line is visible
I've tried something like:
Picker("Select menu item", selection: $selectedItem) {
ForEach(0..<items.count) {
VStack {
Text("Menu item 1").fontWeight(.bold) // Only this text is shown
Text("Description")
}
}
}
I've also tried with
Menu("Options") {
VStack {
Text("Menu item 1").fontWeight(.bold) // Only this text is shown
Text("Description")
}
}
What I want it to look like is something like:
I've spent many hours trying to find an example of something like this. Is this possible to do in SwiftUI? If not, what control should you suggest to use instead?
On the offical docs for Infragistics ig grid, there is nothing mentioned about changing of width.
I have tried:
tooltipShowing: function (evt, args) {
$('#myGrid_tooltips').width(500); // no luck
$('#myGrid_tooltips').addClass('width-500') // still no luck
}
You should set the width over the element with id grid_tooltips. One more thing, all the tooltips has max-width set to equal the width of the column. If you need to show tooltip wider than the column you need to clear max-width. You can do this in tooltipShown event, as tooltipShowing is too early. This code works fine at my side:
tooltipShown: function (evt, args) {
$('#grid_tooltips').css("max-width", "none");
$('#grid_tooltips').width(550);
}
I have successfully got the information by onClick function. But is there any method i can get the point information on Hovering over the point. Right now onHover as mentioned in docs is not working to get the point. This is my jsFiddle.
In previous versions of Chart.js (for example 2.6) the onHover handler has to be configured as below:
hover: {
onHover: function(evt, item) {
if (item.length) {
console.log("onHover", item, evt.type);
console.log(">data", item[0]._index, data.datasets[0].data[item[0]._index]);
}
}
},
itme[0]._index property points to data of target item
So your fiddle (chart.js 2.6) updated is: https://jsfiddle.net/beaver71/440L5661/
With chart.js 2.7: https://jsfiddle.net/beaver71/ttrak7sj/
I'm having a chart build with ChartJS. I'm including datasets.label in multipleTooltipLabel template and facing an update issue. When changing a datasets.label and running chart.update() the tooltip is not updated. I created a JSFiddle demonstrating the issue.
The code I use to include datasets label in tooltip:
var options = {
multiTooltipTemplate: "<%=datasetLabel%>: <%= value + ' %' %>"
};
Beside that option I followed ChartJS usage example for Line charts.
Change label and update chart:
myNewChart.datasets[0].label = 'updated label';
myNewChart.update();
Label shown in tooltip is not updated...
I had a look in ChartJS source code and figured out that showTooltip function is called with a ChartElements array which was not updated.
Update: I might cached the issue. label of dataset is set on each point element and not updated if it changes. showTooltip used this "cached" dataset label when drawing a tooltip. Perhaps this should not be a question on StackOverflow but a bug report for ChartJS.
I found a solution:
myNewChart.datasets[0].points.forEach(function(point) {
point.datasetLabel = 'updated label';
});
This might also be the way it should be done. Chart.js documentation of update method says you should set myLineChart.datasets[0].points[2].value = 50; to change the value. That's confusing cause on creation dataset expects the values in data property. points is generated by Chart.Line Class on init. Naming may be different for other chart types (eg. it's bars for a bar chart).
I'm not quite sure if myLineChart.datasets[0].label value is used somewhere or if could be unchanged.
I could solve your problem by changing the original data object (data.datasets[0].label='updated label') then running myNewChart.initialize(data).
var option = {
plugins: {
tooltip: {
callbacks: {
label: function (context) {
//console.log(context);
label = 'new string ' + context.label + ', ' + context.dataIndex;
return label;
}
}
}
}
};
myChart.options = option;
ToolTips / Points Events are configurable with chartJS options...
Find more here: https://www.chartjs.org/docs/latest/configuration/tooltip.html
I have a SPEAK UI dialog with a ListControl bound to a custom JSON datasource. This works and the ListControl is correctly populated. My JSON data looks something like this:
[
{
"itemId":"{BA26159A-194D-4A3C-9D1A-DA9472F11BE0}",
"selected":true
},
{
"itemId":"{E651D0CD-0E7E-4903-8E26-0D1D5A168E69}",
"selected":false
},
{
"itemId":"{E651D0CD-0E7E-4903-8E26-0D1D5A168E70}",
"selected":false
}
]
Is there a way to ensure the relevant row of the ListControl is selected ("selected":true) when the dialog loads?
You can set the ListControl's selected item ID like this: this.MediaResultsListControl.viewModel.set({selectedItemId:"ITEMID"})
(Sitecore.Speak.app instead of this during dubuging in the console)
If you call this.MediaResultsListControl.viewModel.selectedItemId() you can see the selected item has been set by the above method.
Wondering on page load, if you can set the ListControls selected item id, from the page code manually using this method?
Looking at the JS for the list control. It calls this on click of a row. Wonder if you can replace this to trigger selected row?
selectRow: function (row, rowModel) {
this.$el.find(".active").removeClass("active");
row.addClass("active");
this.model.set("selectedItem", rowModel);
this.model.set("selectedItemId", rowModel.get("itemId"));
},