I'm updating ApexCharts using updateSeries while the chart is hidden using display: none. When the series is being updated I think it is checking the width of the element that it is wrapped in. When hidden, the width is considered 0 and therefore the width of the chart is set to 0. I want to force redraw the chart when it is visible but I found nothing in the docs.
PS: The chart restores to its original size when I resize the window.
I don't know weather it will be help you or not I have same issue using with apex chart some lables and title was missing but when you resize the window it will automatically redraw the chart because apexchart have this property by default
chart: {
redrawOnWindowResize: true
}
I have try this this put chart render method inside timeout function and it works for me
setTimeout(() => {
chart.render();
},2000)
In my case, it seems like chart rending before getting style of parent component
Try this.
window.dispatchEvent(new Event('resize'));
Related
I created some shapes in Raphael Js and tried to bind the click event to those shapes.But,the click is getting detected only at the border/path line of that shape.below is a section of code
square = paper.rect(200, 200, 50, 50);
// square.click(function() {
// console.log('clicked');
// })
$(square.node).click(function (evt) {
console.log('clicked');
});
Am not able to discern the cause.Please help
If you want to be able to click on the 'space' in an element, you need to give it a fill.
el.attr({ fill: 'red', opacity: 0.1 });
Note, if you want the background to show through still even with a fill, you could set it with opacity 0.0001 or similar and you would be able to click it still.
You'll need a more complete sample that shows the rest of the HTML on the page: when this happens it is typically an overlap issue. There is a DOM element that is sharing space with the Raphael canvas and might be intercepting the click events.
I'm using C++Builder 6.
I have a Form contain a TLabel.
I would like that the Form will contain a scroll bar when needed since sometimes the label text is too large to display.
What happens now is that the Form height grows as the Label height grows.
I would like that the Form height will be always <= a variable that I define, and that the VertScrollBar will appear when the label height is > that limit.
How to set the VertScrollBar property of the Form to support this?
Mainly, how to set the position and the range?
Set the Form's Contraints.MaxHeight property to the desired limit value, and set its AutoScroll property to true. Let the VCL manage the Form's scrollbars for you automatically when its content exceeds its width/height.
Alternatively, I would suggest getting rid of the TLabel and use a TRichEdit1 instead. Set its WordWrap to true, and its ScrollBars to ssVertical. It will auto-hide the scrollbar when it is not needed.
1: TMemo has the same ScrollBars property, but it does not hide the scrollbar when it is not needed.
I have a chart.js line chart displaying properly. When you hover over the y-axis gridlines, the tooltips display as they should.
I'm trying to convert this to function on a touchscreen, so there is no hover. Is there a way to add a simple parameter to make the tooltip show on both hover and onclick?
Note, I know I could add a custom tooltip and add all of that functionality - I'm trying to see if there's just a parameter I can add as I don't need a custom tooltip.
For Chart.js v2, you can specify those events at the root level of chart options.
options: {
events: ['click']
}
Just add "click" to your tooltipEvents list when specifying the options for the chart
...
tooltipEvents: ["mousemove", "touchstart", "touchmove", "click"],
});
In the fiddle below, I've removed all other events from the list except for click to give you an idea of how it will be like on a mobile
Fiddle - http://jsfiddle.net/8uobybv3/
For ChartJS version 2.8.0, you will need to add both the click and mouseout events to make the tooltip behave the desired way.
The click event would make the tooltip to appear when point is clicked and the mouseout event would hide the tooltip when the mouse pointer is moved outside of the chart canvas area which is the desired behavior.
Note: Without adding the mouseout event the tooltip would not hide even when the mouse is moved or clicked outside the chart canvas area.
Code:
options: {
events: ["click", "mouseout"],
....
...
I'd like to change the default style of the list-view control's tooltips to balloon.
I first called ListView_GetToolTips() to get the HWND of the list-view's tooltips control, and then used GetWindowLongPtr()/SetWindowLongPtr() to add the TTS_BALLOON style.
I handle LVN_GETINFOTIP to customize the tooltip for the items (first column) in the list-view: the tooltip texts that appear for the first column items are actually a copy of the text of the third column. The other columns (subitems) are managed automatically by the list-view.
The balloon-style tooltips for the first column items seem OK; their stems are correctly positioned:
But the tooltips for the second column seem drawn wrongly, e.g. the balloon is drawn as if it was referred to a subitem in a row below the actual row pointed by the mouse cursor.
In the following picture, the "star" indicates the position in which the mouse cursor was when the tooltip appeared, but the tooltip's stem points to a row below, marked with an ellipse:
The strange thing is that the tooltips for the third column seem drawn correctly.
Is this a bug in the list-view control? (I'm using Windows 7.)
Or what am I missing here?
The ListView uses a tracking tooltip and positions it to unfold and reveal the hidden text in a column that's too small. It's not expecting its tooltip to be a balloon and so doesn't compensate for that.
You'd need to sub-class the tooltip itself, watch for TTM_TRACKPOSITION messages from the ListView, and adjust the coordinates.
Your second question - the shaded background comes from the system theme. You should be able to get it by calling SetWindowTheme on the tooltip (I'm not sure why the ListView disables themes for the tip).
Is there anyway to trigger a mouseover event for a specific pie chart slice that will that slice's tooltip appear through the "ready" event?
My code right now is as follows:
google.visualization.events.addListener(google_chart, 'ready', function () {
google_chart.setSelection([{row: 0, column: null}]);
});
setSelection() doesn't appear to trigger the tooltip.
I am using Google charts on a mobile web app and want to avoid using legends so that the chart has the most amount of real estate possible.
I am afraid there is no way to trigger the built-in tooltip on init. However you can hook-up a custom tooltip component which triggers at startup.