chart.js tooltip position, tooltip not displayed - chart.js

I have a line chart with two datasets. Initially the Y Axis is 0-100. The first line is roughly a straight line around a value of say 70, the second line is all below say 30. If I zoom the chart vertically by forcing the Y Axis min to 65 and max 75 (ie I want to exam the first line expanded vertically) then when I hover over a data point, the tooltip is missing. Actually I figure it is off the chart (so to speak :-) ).
The tooltip seems to be automatically positioned vertically between the lowest and highest data points, even if one of those data points is way below the chart.
My question: is this a bug or is there a way I can tell chart.js to ignore data points that are off chart when determining tooltip vertical position?
I'd even be happy if the tooltip was always at a fixed vertical position, ie across the top of the chart or centred vertically on the chart.
Using chart.js V2.7.1

Tooltips have two positioning modes, as per the documentation:
Possible modes are:
'average'
'nearest'
'average' mode will place the tooltip at the average position of the items displayed in the tooltip. 'nearest' will place the tooltip at the position of the element closest to the event position.
You can see both modes in operation at the relevant samples page.
average is the default mode. From your description, switching to nearest should resolve your issue.

Related

Different distance between bars in clustered Power BI bar chart

I came across this unusual problem. I try to create chart showing top 1 manager(Y axis) by rating (X axis) from each region, with Region added to legend for color differentiation. However, then bars are located on uneven distance from each other, some are closer, other are further from the next one. (picture 1)
Issue seems to go away if I add Region to Y axis above Manager's Name, but then Y axis shows region labels (picture 2), and not managers names. if it's added below or removed, bars go haywire again.
I had the same issue and think it's because PBI is trying to display all the categories from the Legend on the Y axis, which show up as "hidden" or blank bars in between your other bars and make it look like the spacing is random. I was able to fix this by switching from a Clustered Bar to a Stacked Bar chart. Couldn't figure out how to suppress those other legend categories from the Y axis in a Clustered Bar. Hope that helps.

Chart JS: Bar Chart to have min Length as value range is too big

I working with ChartJS Bar chart, encountered that small value were not drawn when the value range is too huge.
example [1000,500000000,40000]
This case the chart will only draw out the 500m, and they rest are hidden.
I want show all instead of limiting my max tick.
Did a deeper reading. there's a property called minBarlengh undter dataset. This did the trick.

Why do Bar Pie Chart values not line up?

I'm working on a Bar Pie Chart but my values are not lining up. For example, Red data is clearly larger then blue, but blue value is higher.
The data is correct, chart.js doesnt show the area as more, it uses the angle of the circle , which normally would also divede the area normally. And as you can see the angles are correct so to fix your issue you will have to write a custom controller that draws your chart. https://www.chartjs.org/docs/latest/developers/charts.html

AMCharts4 XYChart no prezoom when hiding a series

I have an AMCharts XYChart with one columnseries which is added and shown when I init the chart. I have another lineseries which I also add, but series.hide() when I init the chart. The legend then allows me to show/hide the lineseries.
Two problems:
1) When the chart is first set up, it prezooms to the single columnseries. I want the ability to zoom on the chart, but I don't want it to prezoom when it first loads with the single series. What is the chart configuration to disable this or return the chart to the full zoom extent onready (which would be a bit hacky).
2) The second issue is that sometimes when I click the lineseries in the legend to add it, the zoom doesn't work at first when the lineseries is added to the chart. Instead, it may only correctly zoom on the subsequent click. I may escape this second problem if the first one is fixed.

It is possible to hide part of labels google chart

I want to hide couple labels, first 2 and last 2 in axis X.
I want to disable black line at the bottom of the graph.
I'm able to do it after the chart is loaded - using javascript and change it dynamically. When I add new data and use draw method, Graph is overwriting my dynamic stylesheets changes. I was trying to set it as an option in graph initializer but I couldn't find the solution for that.
I use areaChart.
It was 3 years ago. I don't need it anymore. I'm leaving this question for others.
It's a little hard understanding what you're trying to do, but I think I get it.
As I read it, you want to eliminate two variables from your DataTable when you plot your chart (to prevent them from being in the legend)? Assuming that's the case, you can either take them out of the data table, or use a ChartWrapper on your object, and set the view:{columns:[x,y,z]} option to the ChartWrapper. Assuming you can't change the DataTable, or a ChartWrapper isn't an option, and you just want to not have certain plotted objects appear in your chart but not in the legend, you want to set the series option. For example, assuming three columns in your DataTable, you can hide the third item as:
series: [{visibleInLegend:true}, {visibleInLegend:true}, {visibleInLegend:false}],
Second of all, if you want to hide the horizontal axis, you need to have continuous data, and set hAxis.baselineColor to 'clear'.
To hide some of the tick-mark labels, use ticks: ticklist to label the axis, and for some of the labels in ticklist use an {v:value,f:label} structure definition, with a zero-length string for the label.
Here's an example. Note the omitted labels for some of the ticks on each vertical axis. View source to see how I did it:
http://www.sealevel.info/co2_and_ch4c.html
Note the tick list definitions. This one is for the left vertical axis:
var vticklist1 = [{v:235,f:''},{v:250,f:''},275,300,325,350,375,400,{v:425,f:'ppmv'}];
The first & second ticks (at the bottom, for values 235 and 250) display no labels. The next six ticks, for values 275-400, display normally. The last (top) tick displays as "ppmv" instead of 425. The result looks like this: