Automatically legend title has style text-overflow: ellipsis;, but I need to show all text from legend title. So, I need to set text-overflow: clip;.
When user change window size, legend items overlapping each other or
move to outside of chart container.
You can reproduce it here: https://jsfiddle.net/6ybv9kjx/6/
For reproduce you should change window size, when chart initialized.
Also, legend items showing be a certain rule. If all text in legend item doesn't placed in one line with previous item, item move to next line. I need, that legend item can breaking words. Is it possible?
The useHtml is a know problem.
For now if you don't really need it just disable it.
Fiddle
You can solve this issue by redrawing the chart whenever the browser window is resized. That way, the legend elements will be rendered based on the new width of the window.
Assign your chart options to a variable, which you'll then call each time the window is resized.
var thisChartOptions = {
/* your options go here */
};
/* draw chart when the browser window is loaded or resized
(see https://stackoverflow.com/a/1974797/2596103) */
$(window).on('resize', function() {
Highcharts.chart('container', thisChartOptions);
}).resize();
You can see this working in this fiddle: https://jsfiddle.net/brightmatrix/6ybv9kjx/43/
I tried using the legend.update() function (see https://api.highcharts.com/class-reference/Highcharts.Legend#update), but the legend items would overlap each other when the window was made smaller.
Related
In Vaadin 14.6.1, I have created a horizontal layout with 2 charts (and some other stuff). The charts are not using up the correct width -- they seem to not "pick up" on the right width (see screenshot below). I set the width to 100% etc. Also, this problem disappears if I use a simpler component, such as label, instead of charts (from Highcharts). I've experienced a similar problem before, but in more complex settings (e.g. a user adjusts the splitlayout and the underlying chart does not resize). But in this case, it's an even more reasonably straightforward scenario (i.e. no adjustment by user of the width of any layout) and yet Vaadin doesn't seem to pick up the right width, at least when using charts. Is this a known or reproducible issue? If so, any workaround?
Charts indeed behave badly with some layouts. I have noticed two cases. The other is the Board component, where the workaround is just simply wrap Chart inside Div, i.e.
Div div = new Div();
div.add(chart);
// and then add div to Board
SplitLayout is more tricky. You need to call Chart to reflow after splitter has been moved. Something like the following finds all the charts and forces them to redraw.
splitLayout.addSplitterDragendListener(event -> {
getUI().ifPresent(ui -> ui.getPage().executeJs(
"Array.from(window.document.getElementsByTagName('vaadin-chart')).forEach( el => el.__reflow());"));
});
Note, if you have only one chart or have conveniently the references to chart instances you can do
chart.getElement().executeJs("$0.__reflow();", chart.getElement());
I have four HighCharts on a page, stacked vertically. In each of these charts I have buttons that change the data range and re-load the chart.
This works fine for the top two, but when the chart re-loads on the bottom two it moves the screen up the page, always to the same point.
With some testing I found that it doesn't matter what order the charts are in, and also if you click the button on the top form and scroll down the page, it moves the page back up to the same position.
It's like HighCharts has a lower limit on where the page an be and always moves it back to this position when a chart is loaded.
I can't find any settings within HighCharts or anything on Google that will sort this.
I thank you all in advance for your help
Paul
It's because chart container height for a moment gets smaller on chart reload. You can fix this by setting fixed container height.
I am using highcharts where I need extra padding on my chart. When I use navigator and zoom in I the padding is lost - which is fine as I am zooming in. However when I zoom out using Navigator I don't get my padding back. Alternatively if I use the zoom button on chart I get the padding back (I would expect the same behaviour from navigator as well when I try to zoom out).
I've copied a sample chart form Highcharts Demo on jsFiddle http://jsfiddle.net/gajjargaurav/RULh9/5/ with Navigator and http://jsfiddle.net/gajjargaurav/RULh9/4/ with Zoom button
The padding I have set is as below for my sample,
xAxis: {
maxPadding: 0.22, //Prevent chart going off the screen on the right
minPadding: 0.22,
tickPosition: 'outside'
}
The question is, how I can get the navigator to behave like the zoom button does when I try to zoom out using navigator?
Unfortunately min/maxPadding works only for initial state. If you want to improve your range in that way, I advice to use afterSetExtremes event handler, and there setup new extremes( just increase that one you get).
Note: When setting new extremes in afterSetExtremes, will call another afterSetExtremes. Make sure. Make sure that you will not create infinite loop (add some flag checking if extremes are already improved, or not).
I have a basic two axis line chart, with one series. Its data are datetime on xAxis, and average numbers for yAxis. When I load the page with my chart, I have a nice xAxis display with a label for every other month, which allows the chart to be nicely presented, and readable.
Whenever I click the legend button to hide this series, (I still show the xAxis even if the chart is now empty), and then click it again to show it, the xAxis now displays every month (twice as many as before) and the label texts are overlapping each other.
If I try to hide and display the series again, I have the same result.
Could it be that once the hide function is fired by the legend button, it is deleting some of my options, or is changing them automatically?
Basically, all I want is to keep the "every other month" label display for my xAxis, no matter how many times I hide or toggle my series.
EDIT : I tried to set chart.ignoreHiddenSeries to false and the xAxis is not changing anymore, but I kinda wanted to keep the scalable feature for the yAxis... And now when I toggle or hide another series, the yAxis stands still.
Any workaround? This is just a half solution for me.
You can try to use showEmpty() function http://api.highcharts.com/highcharts#xAxis.showEmpty
I am able to use http://jsfiddle.net/9pUu4/ code to have vertical text in table cell. Above this table is my horizontal navigation menu which expands into links upon hovering the tab with jquery ui menu. My problem is that when hover the tab above vertical text the text laid over the menu. But it doesn't happen when hover the horizontal text on the same row of the table; that is menu covers page content. This happens on chrome and firefox.
I tried messing with z-index issue with no luck. Does it have anything to do with the transform css property (-webkit-transform, -moz-transform)? Or jquery menu conflict with vertical text?
.Vertical
{
writing-mode:bt-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
}
After digging deeper in SO, How do I make sure my drop down menus overlap and cover anything on my page?, I suspect vertical text: transform origin; or simply vertical text comes after menu on page layout, may make this vertical text "on-top".
Anyways, adding this wrapper outside of the menu works.
#div1
{
position : relative;
z-index : 1000;
}
More code
z-index = 1 as stated works, but I just want to make sure it covers everything.