Hello everyone I'm trying to make a shared tooltip to happen only when the y-axis values are the same. Which means my markers overlap each other. Same time I want to have the shared option disable. Looking through the docs I found out that this probably can happen with a custom function. Any tips?
My current tooltip options:
tooltip: {
enabled: true,
shared: false,
intersect: true,
y: {
formatter: function (val) {
return val + "%";
},
},
x: {
show: true,
},
marker: {
show: true
},
},
For example in the picture below the marker with the light-green overlap two others lines. If I hover over the marker the tooltip will show me only the value of that line.
Related
I am currently using a line-chart with chart.js 3.5.0 and react-chart-js 3.0.4, given two datasets.
The first dataset has data in {x,y}-format with null-values for some y.
When hovering over those null-values, the tooltip jumps to the start of the second dataset. In this case, I would like to hide the tooltip, but approaching the problem with callbacks didn't work.
Has anybody experienced the same issue?
Screenshot
codesandbox
const options = {
interaction: {
intersect: false
},
maintainAspectRatio: true,
animation: false,
plugins: {
tooltip: {
mode: 'nearest',
axis: 'x',
position: 'average',
yAlign: "bottom"
},
},
scales: {
y: {
type: 'linear',
beginAtZero: true,
min: 0,
grace: '20%',
}
},
chartArea: {
backgroundColor: "rgb(240,240,240)"
}
}
You can use mode: 'x' in your tooltip config.
Together with setting pointHitRadius to 0 in both datasets makes it so you dont have duplicate values in your tooltip.
Example: https://codesandbox.io/s/hardcore-brown-1vxcjh?file=/src/components/CChart.jsx
I have chord generated by ChordJS library. Almost everything is great but with some specific data I have problem becouse of tooltip position. I tried to change this with different options but I couldn't handle that - there are two separatet views at my chord. One with columns so every point inside of column is triggering tooltip. Second one is bar char with some points to select and only when mouse is at these points tooltip is shown.
Here You can see tooltip for column - it's covering bar with point to select.
Here is point at barchart:
I think I have to handle that with options parameter so here what I have for that moment ('tooltips' were changed a lot of times)
chartOptions = {
// Set colors on bars when clicked
onClick: function (e, activeElements) {
if (activeElements[0]) {
let barNumber = this.data.datasets[0].backgroundColor.length
var elementIdx = activeElements[0]._index;
let colors = self.fillColorArray(mintColor, yellowColor, yellowColor, elementIdx, barNumber);
this.data.datasets[0].backgroundColor = colors;
self.props.selectCharBar(elementIdx);
}
},
scaleShowVerticalLines: false,
responsive: true,
scales: {
xAxes: [{
id: 'xAxisA',
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
id: 'yAxisA',
type: 'linear',
position: 'left',
ticks: {
min: 0,
callback: function (value, index, values) {
return value.toLocaleString();
}
}
}]
},
legend: {
labels: {
//Workaround for legend color change when first bar selected by user:
generateLabels: function (chart) {
let labels = ChartJs.defaults.global.legend.labels.generateLabels(chart);
if (labels[0]) labels[0].fillStyle = mintColor;
return labels;
}
}
},
tooltips: {
position: 'average',
intersect: true,
}
};
What I want to achieve? Probably position of tooltip to mirror reflection of it can help but I have problems to do that. Or maybe someone has other idea?
So, I think I've figured out your problem! Your tooltip parameters should be inside an options argument!
Like this:
options:{
tooltips: {
custom:function(tooltipModel)
{
tooltipModel.yAlign="bottom";
tooltipModel.y=tooltipModel.y-30;
},
intersect:true
}
}
I would advise that you wouldn't make the tooltip follow the mouse, it can easily block more elements rather than making them visible.
I've prepared a fiddle with random data, and with a custom function I've forced the tooltip to always be on top. You can also console.log(tooltipModel) and mess around with the parameters for the intended styles.
Hope this helps you.
JSFiddle
I need to underline with different colors data, based on some values. I can change color in detail chart, but I need to change it in master chart too.
Here the JSFiddle http://jsfiddle.net/2msZe/35/
I have printed in console the data, and here there is color set to black.
{y:0.97, color:'black', flag:true}
Any help?
Thanks
You need to disable turbpThreshold, otherwise colors are not used, see: http://jsfiddle.net/2msZe/37/
plotOptions: {
series: {
turboThreshold: 0,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
enableMouseTracking: false
}
},
In my current project we are using Hightchart to show charts for various analysis.
In line chart we are showing tooltip on hover.
when there are only two series(two lines) charts renders successfully and show tooltip when it exceeds from 2 then charts renders successfully but tooltip only getting displayed for intial two lines.
How can i show tooltip for all the lines when it exceeds from 2.
below the code snippet of plotOptions and series data.
plotOptions: {
area: {
fillOpacity:0.0001,
lineWidth: 2,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 2
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><br><table style="height:auto;width:300px;white-space:normal !important;overflow:auto">',
pointFormat: '<tr><td style="color:black;font-weight:normal;padding:2px;text-align: justify">{series.name}: </td>' +
'<td style="color:black;font-weight:normal;padding:0">{point.y}</td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
threshold: null
}
}
below is series: data
[{"name":"Text1","type":"area","data":[[1262304000000,367],[1293840000000,0.1],[1325376000000,387],[1356998400000,397],[1388534400000,407]]},
{"name":"Text2","type":"area","data":[[1262304000000,272],[1293840000000,1.1],[1325376000000,292],[1356998400000,302],[1388534400000,312]]},
{"name":"Text3","type":"area","data":[[1262304000000,916],[1293840000000,2.1],[1325376000000,936],[1356998400000,946],[1388534400000,956]]},
{"name":"Text4","type":"area","data":[[1262304000000,546],[1293840000000,3.1],[1325376000000,566],[1356998400000,576],[1388534400000,586]]},
{"name":"Text5","type":"area","data":[[1262304000000,726],[1293840000000,4.1],[1325376000000,746],[1356998400000,756],[1388534400000,766]]},
{"name":"Text6","type":"area","data":[[1262304000000,774],[1293840000000,0.2],[1325376000000,794],[1356998400000,804],[1388534400000,814]]}]
update:
I further investigated and found it shows tooltip for all when we start mouse hover from either start or end point of line in the chart but it doesn't show tooltip if start hovering line anywhere apart from starte or end point
Do you mean something like this : http://jsfiddle.net/vr9B8/ ?
tooltip: {
formatter:function() {
var len = this.series.chart.series.length - 1;
if(len > 2)
return 'content of tooltip';
else
return false;
}
},
I want to render a very simple horizontal stacked bar with only two facts. Without any axes.
Like this: My target.
But the only thing i could do is this: My actuell Version.
The Problem is that when i only insert two values (e.g. "2" and "7") it only shows me one bar for the "7".And the second problem is the tick on the left side with these little lines. Dont know how to solve this. Any ideas ?
My Code:
$(document).ready(function(){
var s1 = [2];
var s2 = [7];
var s3 = [10];
plot3 = $.jqplot('chart1', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
// Put a 30 pixel margin between bars.
// barMargin: 30,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: true
},
pointLabels: {show: true}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
},
xaxis: {
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0,
//max: 15,
}
},
axesDefaults:{
showTicks: false,
showTickMarks: false,
},
legend: {
show: false,
location: 'e',
placement: 'outside'
},
grid:{
drawGridlines: false,
borderWidth: 0,
shadow: false,
background:'#ffffff',
gridLineColor: '#FFFFFF',
},
});
// Bind a listener to the "jqplotDataClick" event. Here, simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
It looks like the padMin: 0 setting on xaxis is causing the second series to be incorrectly displayed. If you remove that altogether it works as you want.
As for removing the grid line ticks, try adding this to the axesDefaults settings
tickOptions: {
markSize: 0,
}
So it will now look like this:
axesDefaults:{
showTicks: false,
showTickMarks: false,
tickOptions: {
markSize: 0,
}
},
If it doesn't work with just that, try using the canvasAxisTickRenderer, more details here: http://www.jqplot.com/tests/rotated-tick-labels.php