Ran this example from Angular NVD3's 'live edit' area.
http://krispo.github.io/angular-nvd3/#/
I opened it in Plunkr: Stacked Area Chart
As per the documentation,you need to add the following code, to hide the x and y axes.
showXAxis: false,
showYAxis: false,
You can add it after line number 19(in plunkr -> app.js)
After adding the above code, it doesn't work. The chart shows up and then dissapears.
But the same works for other charts, except for stacked area chart.
[I have tried it on line-chart, filled-line-chart, bar-chart]
Awaiting a reply.
Ok,
Figured this one out.
Zoom is enabled for this chart (app.js -> line:31)
Rolling the mouse zooms into the chart, and it expects the axis to be enabled (to understand the chart better).
Disabling the axis for a zoomable chart may not make sense, as one would not understand, what portion/section of the chart is showing after you have zoomed in.
Thank you. :-)
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
In Data Studio my 10 points pie chart is like below:
As you can see there is a navigation arrow in the legend at the top of the pie.
I wonder how can I avoid the navigation by creating the multiline legend? How can I wrap the current single line legend?
Three ways to display all items in the legend; located in the Style Tab of the Pie Chart (added a GIF to elaborate):
Increasing the max lines;
Increasing the width of the Pie Chart;
Reducing the font size of the legend.
EDIT: Multi line Legend (Workaround using a Bar Chart)
How about using the legend from a Bar Chart? Added a GIF to elaborate as well as a few points:
Bar Chart: Use a Dimension and Breakdown Dimension that's the same as the one on the Pie Chart and enable the legend (Top) as well as using 2 lines (no legend for the Pie Chart)
Shape: Add a Shape over the Bar Chart (one that blends in with the background)
Order: Right click on components and select Order from the drop down to change the order of the components (Bar Chart: Send to back; Shape: Send Backwards (behind the Pie Chart); Pie Chart: Bring to Front)
Fine Tuning: Use Shift + Movement for precision placement (to get the shape exactly where you want it)
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.
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.