I am using highcharts-ng (https://github.com/pablojim/highcharts-ng) and can reproduce this issue with one of the examples linked from the readme. Steps to reproduce:
Go here:
http://pablojim.github.io/highcharts-ng/examples/example.html
Scroll down and click the "Highchart/Highstock" button
Scroll back up (the chart should be blank) and from the first Series
heading, select Type: Line. Note the chart will redraw. There should be no Zoom/Date Range options at the top of the chart.
Now drag the horizontal scroll bar (Navigator) at the bottom of the chart and note the Zoom / Date Range options appear
How do I make these appear on page load? Rather than waiting for our visitors to interact with the chart.
Related
I have simple react application where I am using react-visjs-timeline. When I change a movable property (this property is to allow or block horizontal scroll) of the timeline from options, the vertical scroll jumps back to the top.
It is not only changing movable property but changing any property in the options triggers this issue. The project is available in codesandbox and I would highly appreciate any help or suggestions.
To reproduce the problem:
Scroll down the timeline.
Click on the button "Lock/Unlock Scroll"
You will immediately notice that the timeline jumps back to the top.
Link to the Project: https://codesandbox.io/s/reactjs-vistimeline-n18rm6
I have a vertical swiper where in one of the slides I have a box with overflowing Y content, I want the user to be able to scroll vertically within the box. But in both dektop and android mousescroll is not working. No scroll event is generating from within the box, and scroll is interpreted as swiping. I also have a multiline text field inside same slide but I am able to scroll in that, so it must be possible. How can I make it work the way I want to?
I am working on a travel app where I have to show the travel plan with drop-down as shown in the image, I don't know how to create these circles joined with dotted line...
If I expand a plan, the respective dotted line expands with it.
How do I code that in React Native?
Image is taken from bookmundi
I have used native base, dropdown component, but I need these circles and lines styling too.
I have been trying to update our code to dygraphs 2.x from 1.1.1, but I have encountered a issue with the legend.
I believe it is related to the way our page is structured. We are also using React so this may also have an impact.
The dygraph is on a tab which is initially hidden until the user clicks a button after selecting various options and data sources to generate a time series line chart.
The legend option set to 'always' seems to push the legend off the right of the graph which is not readable by users.Unless they full screen the browser.
After debugging the source I can see that offsetWidth is being used to position the legend and is returning 0. I can only surmise that because the div the chart is inside is only made visible probably after the chart is drawn is messing the position of the legend.
If I regen the chart while visible the legend appears over top the chart as desired. But if I then hide the chart (by clicking on the other tab) and then show the chart (clicking on it's tab) the legend if off to the right again.
I'm not sure how to workaround this.
Presently I reverted back to 1.1.1 which does not have this issue.
Hope someone can suggest something.
I have developed the xtrareport in win-form.NET. In this, i have draw the xtracharts on to the xtrareport . in this scroll bar not active . & i want to show the date & time in the as difference of the second.I have design the reports & then show into the print preview.
what is the procedure to create the charts in to the xtrareport ?
You can't enable chart scrollbars in your report because it's just a generated image.
But you will be able to make your chart clickable and show a real 'live' chart in another dialog. And this chart's scroll bars can be enabled.
Please, review the question at Q131550. It describes a problem similar to yours and it has been already solved.