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
Related
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
I am using Highcharts box plot is there a way to show data points in highcharts as below
Where data point will give some addition info on the third parameter.
Please point to sample if this exists in highchart
I think that the boxplot series should fill your requirements.
Demo: https://www.highcharts.com/demo/box-plot
I'm working on an AngularJS 1.5.3 project , and I use Angular-nvd3(1.0.7). I have met 2 problems:
1,When I'm using a discreteBarChart , I need to assign different color to every column,like this:(seems the picture can't display , you can imaging it , it's a simple chart like http://krispo.github.io/angular-nvd3/#/discreteBarChart)
and I didn't find any place, to let me add a group of color .so I want to know how to add different colors to each column.
and the second question is , I need to use a multi Chart , like this:http://krispo.github.io/angular-nvd3/#/multiChart . don't need so complex like the link. just need a pair of histogram . but I don't know the data's right structure.and it's not in the documentation. so I hope someone can help me with those 2 promblems.
Answer to your First Query :
You can set a different color for each bar in your discrete Bar Graph Chart in Multiple ways:
1. First Approach:
Configure your $scope.options object which you provide to nvd3 directive and provide a list of color code you want for your bars. You can provide a color name, Hex Code of Color or RGB Code of Color.
View This Plunkr for a working demo of the first approach. Please see plunkr before reading the explanation.
You can see in this demo that colors are provided as a list in $scope.options object. The first color is provided as the color name i.e red, the second color is provided as RGB Code and rest all colors are provided as Hex Code. You can provide any number of colors in the list.
Here, you should note: If there are more number of bars in your graph then the number of colors then colors for bar will start repeating in the same order in which you provided in list.
2. Second Approach:
View This Plunkr for working demo of the second approach. Please see plunkr before reading the explanation.
In the second approach, the color is provided with $scope.data object which you provide to nvd3 directive and we made necessary changes to the $scope.options configuration object.
Here in the $scope.options object the color field is set to a function which returns color field of individual objects of $scope.data array i.e 'purple' for first, rgb(10,20,30) for second, etc..
Hope this helps!!
Will back get soon with the solution for your second problem.
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.