I have combination chart as displayed in the fiddle using highcharts
https://jsfiddle.net/u1p2ebk0/3/
but while displaying September month plots are not showing the custom icons on the chart really not sure why is this behavior and also when i click no 1m zoom custom icons are showing but on load also it should show the icons not sure what i am missing
All flags are not displayed because there is no place for them all. When you set series.flags.allowOverlapX property to true, all flags will be shown but they will overlap each other. You can try to reduce their size or alternatively modify the amount of setting data depending on rangeSelector selection or chart size.
Let me know in case of any implementation issues.
Demo:
https://jsfiddle.net/BlackLabel/rk95uL10/
API reference:
https://api.highcharts.com/highstock/series.flags.allowOverlapX
Related
if I have the same point for two plots in a line chart of zingchart js when I hover on that point I got only a single plot value other is getting hidden
behind one
If active areas for tooltips overlap perfectly, only one value will show. crosshair-x is the only tool which shows all values as you can see in this demo
I'm trying create a simple area chart in react highcharts-react-official,
it is like this bellow https://codesandbox.io/s/volumechart-o8nrg.
But this link couldn't reproduce the problem.
The problem is Graph drawing is not stable.
It's mean some time will be success but some time failure.
I checked console.log(props) all times stored correct data.
I think it maybe happen by browser because when I open chrome dev-tool then chart was output correct color and data.
and more also output correct color and data when I click some legends in chart's.
How can I debug this problem?
this was the success.
https://gyazo.com/e02eda013acd34cde8b78086e0ef577c
this was the failure.
https://gyazo.com/7add2f65b9610db550dc922d95ef2e62
The chart changed by select box
this is a sample I clicked select box. It chart Doesn't draw anything
https://gyazo.com/4330f12a6a2c2d9c8bfa496cd5de22fa
but when I clicked some legend, chart will draw contents.
this is a sample movie
https://gyazo.com/3cab5f69316cf4c932e0406ae1f95067
and it data is updated from clicked select box.
It mean data is correct and chart was reloaded.
but only can not output color and data.
other else success example are zoom or shrink browser size.
I am using this template https://coreui.io/v1/demo/pro/AngularJS_Demo/#!/dashboard for my angular project. In that it includes chart.js and angular-chart.js. After good amount of googling, I am still not able to get the tooltip in the chart above all element presents.
In all the other product of coreui it shows properly. But I am not sure why it not showing here. Please help me.
Looking at the source code, it seems they are using ChartJs for the charts.
ChartJS should automatically find the right position for your tooltips, but since the chart area is so small, the tooltip would look cut-off when it has a top position too. Try increasing the area around the chart to give the tooltip some more space. Because all the other examples in your dashboard have larger charts/containers, the problem happens only in the small boxes.
When you want to have some more power over the tooltip, you can also switch to HTML tooltips so the tooltip will be added outside of the canvas, and can be configured through CSS (like Z-index).
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.
Using Angular ui-grid latest version (4.0.0) having 6 columns and it displays correctly on laptop/desktop(Big screens) but displays very badly in small screen devices(Mobile phones), data get cut with (...) and columns display one below the other. Anything to fix it?
We already using the columnDefs with column width in % but it was not coming, though, I have figured it out actually parent div was given 100% width so it's taking viewport width and adjust grid accordingly but when parent width removed its works!!!