I am adding custom chart labels using setResultTableFormatter
line[key].setResultTableFormatter((builder, series, xValue, yValue) => {
return builder
.addRow(name)
.addRow(yValue.toFixed(2))
.addRow(timedata[xValue.toFixed(0)])
});
This is working fine in Dashboards with 4 charts.But if there is 6 charts in dashboard..Label is hiding to the right side , If i place cursor to right side of the page.PLease check below example.
Please use chart.setPadding to add padding on the problematic sides
chart.setPadding({ right: 60 })
Related
Is it possible to click on the chart and drag around like tradingview panning ?
Right now its creating rectangle only.
const chart = lightningChart().ChartXY()
// Method for adding OHLCSeries takes one argument: seriesConstructor.
const ohlcSeries = chart.addOHLCSeries(
// Specify type of figure used
{ seriesConstructor: OHLCFigures.Candlestick }
)
You can pan the chart with right click of the mouse. Right now it's not possible to switch the panning of the chart to left click but we are planning to implement a solution to remap the mouse/touch interactions in future.
You can also remove an axis from the panning interaction by calling axis.setChartInteractionPanByDrag(false).
EDIT:
With the new v3.0.0 release, ChartXY mouse interaction buttons can now be explicitly configured. For example, changing panning to left mouse button, and rectangle zoom/fit to right mouse button:
const lcjs = lightningChart({
overrideInteractionMouseButtons: {
chartXYPanMouseButton: 0,
chartXYRectangleZoomFitMouseButton: 2,
},
})
const chart = lcjs.ChartXY()
If we set a dir property to rtl, then the time axis goes to the right side, I need the same, but the rest of the calendar should be in ltr mode. I tried swapping cells in the grid:
const timeElements = [].slice.call(slats.querySelectorAll('.fc-time'));
timeElements.forEach((item: HTMLElement) => {
const parent = item.parentNode;
if (parent) {
parent.insertBefore(parent.children[1], parent.children[0]);
}
});
But it breaks columns adjustment:
Screenshot
Is there any way to do that without changing the source code?
I'm trying to create a scroll implementation similar to Facebook's feed in the way that they conditionally lock the side bars. For example if the content in the side bars is shorter than the viewport then the side bars don't scroll. If it does need to scroll, then it scrolls until the bottom of the side bar and stops at the end(all while allowing the center feed to keep scrolling)
The good part, I have almost all of this done, except for a few small issues and conditionally locking the side bars when they are fully in view.
The side bar contains quite a bit of data, and changes dynamically in height after everything is fetched. So my plan is below:
componentDidUpdate(prevProps) {
const leftSideBar = this.leftSideBar.current;
const scrollableWindow = window.innerHeight;
const sideBarHeight = leftSideBar.scrollHeight;
let offset = sideBarHeight - scrollableWindow;
if (this.state.offset !== offset) {
this.setState({ offset: offset });
if (offset > 0) {
this.setState({ lockScroll: false });
} else {
this.setState({ lockScroll: true });
}
}
}
This seems to be working inconsistently, sometimes the sideBarHeight is incorrect and I think it is because the component is updated and I'm getting that value before it is rendered and the height changes?
Basically I'm wondering if there is a better approach to this?
I am using HighCharts in my ASP.Net MVC application using JQuery.
I have managed to show a tooltip with crosshair vertical bar on mouse move. However, I do not want to hide this toolop + bar even if user moves the mouse out of chart. Is there any option available in Highcharts to achieve this?
I searched forums but could not find any working example. One of those solutions is related to cloning tooltip on click event.
You can wrap the Highcharts.Tooltip.prototype.hide by an empty (no-op) function as follows
(function (H) {
H.wrap(H.Tooltip.prototype, 'hide', function (defaultCallback) {
/*
░░░░░▄▄▄▄▀▀▀▀▀▀▀▀▄▄▄▄▄▄░░░░░░░
░░░░░█░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░▀▀▄░░░░
░░░░█░░░▒▒▒▒▒▒░░░░░░░░▒▒▒░░█░░░
░░░█░░░░░░▄██▀▄▄░░░░░▄▄▄░░░░█░░
░▄▀▒▄▄▄▒░█▀▀▀▀▄▄█░░░██▄▄█░░░░█░
█░▒█▒▄░▀▄▄▄▀░░░░░░░░█░░░▒▒▒▒▒░█
█░▒█░█▀▄▄░░░░░█▀░░░░▀▄░░▄▀▀▀▄▒█
░█░▀▄░█▄░█▀▄▄░▀░▀▀░▄▄▀░░░░█░░█░
░░█░░░▀▄▀█▄▄░█▀▀▀▄▄▄▄▀▀█▀██░█░░
░░░█░░░░██░░▀█▄▄▄█▄▄█▄████░█░░░
░░░░█░░░░▀▀▄░█░░░█░█▀██████░█░░
░░░░░▀▄░░░░░▀▀▄▄▄█▄█▄█▄█▄▀░░█░░
░░░░░░░▀▄▄░▒▒▒▒░░░░░░░░░░▒░░░█░
░░░░░░░░░░▀▀▄▄░▒▒▒▒▒▒▒▒▒▒░░░░█░
░░░░░░░░░░░░░░▀▄▄▄▄▄░░░░░░░░█░░
*/
});
}(Highcharts));
Highcharts/Highstock tooltip always visible # JsFiddle
For the minimalists,
(function (H) {
H.wrap(H.Tooltip.prototype, 'hide', function () {});
}(Highcharts));
does the job too ;)
Read More # Customizing Highcharts - Tooltip Visibility
I have a layout where I would like the main content area to be 100% height of the remaining space. So I am almost there but the bottom is truncated (which effects zoom and centering). There is 41px from the bottom that is being truncated, which is the measurement of the header area: http://jsfiddle.net/GTscW/
The reason why I know if it cut off is because I do not see the Google map copyright info. Here is the not truncated, but truncates the top (I just removed the top: 41px from #content .inner-content): http://jsfiddle.net/GTscW/1/
How do I subtract 41px from the bottom from the first sample to get the content 100% of the remaining area?
EDIT:
I was able to add just this: $('#content .inner-content').height($(this).height() - $('#header').height()), but really no CSS solution though???
One issue is that it's not easy to mix percentages and pixel measurements, because different screen sizes will behave differently. But it is possible to use API features to get the map to behave the way you want it to, on any size screen.
Make the map 100% of the screen size, so the header obscures part of the map. Suppress the default map controls so they do not appear partially obscured. Create an empty custom control the same size as the header and position it at the top of the map. When the map controls are added back, the custom control pushes them out of their usual place so they look right on the visible map.
var posn=google.maps.ControlPosition; // shorten the reference
// Add empty custom control
var controlDiv = document.createElement('div');
controlDiv.style.width='100%';
controlDiv.style.height='41px';
map.controls[posn.TOP_LEFT].push(controlDiv);
map.controls[posn.TOP_RIGHT].push(controlDiv);
// Add map controls
map.setOptions({
mapTypeControlOptions:{position:posn.RIGHT_TOP},
mapTypeControl:true,
panControlOptions:{position:posn.LEFT_TOP},
panControl:true,
streetViewControlOptions:{position:posn.LEFT_TOP},
streetViewControl:true,
zoomControlOptions:{position:posn.LEFT_TOP},
zoomControl:true
})
http://jsfiddle.net/GTscW/4/
Note 1: Because the map is actually 41px larger than it looks (in your case), the centre-point will be 20px higher than the centre of the viewable map. This may not be worth worrying about. If it is, then dealing with an apparent centre-point is the subject of another question on SO.
Note 2: This method won't work to get a fixed footer, because the Google logo and Terms links are always at the bottom of the map and [currently] don't move to avoid a control.
I edited your fiddle with a solution: http://jsfiddle.net/T2Nkk/
Basically, create a function that looks something like this:
function remainder() {
$("*[height=\"remainder\"]").each(function(index, element) {
var offsetParent;
var target = $(element);
if (element==$("body")[0]) {
offsetParent = $("html");
}
else {
offsetParent = target.offsetParent();
}
var position = target.position();
var heightParent = offsetParent.height();
var extras = target.outerHeight(true)-target.height();
var remainderHeight = heightParent-position.top;
target.height(remainderHeight-extras);
});
}
For the element that you want to occupy the remainder of the page, do this:
<div id="content" data-role="content" height="remainder">
Finally, when your document is ready:
$(document).ready(function() {
remainder();
});
In css only you can try to use a trick : use both top and bottom attributes on position: absolute property like I did on your fiddle : http://jsfiddle.net/GTscW/23/
Don't know if it works everywhere though.