Hi ALL, I have created a heatmap using business chart which is using a SVG image in background to show in which area device has more movement. I have kept the axis and grid in such a way that it aligns with my background image. but if i switch to another browser or view it from another computer i see the x axis and y axis leaving the left bottom of image and shifting which is removes the alignment of my heatmap points with the background image. is it the panel size or axis measurements ?
please share your code. we are unable to see your screen remotely 
@yosiasz : here you go -
return {
backgroundColor: 'transparent',
dataset: context.editor.dataset,
series: context.editor.series.map(series => {
if (series.type === 'heatmap') {
return {
...series
};
}
return series;
}),
xAxis: {
type: 'value',
min: 0,
max: 434,
axisLine: {
lineStyle: {
color: '#8B0000',
width: 4
}
},
axisLabel: {
color: '#8B0000',
fontSize: 14
}
},
yAxis: {
type: 'value',
min: 0,
max: 280,
axisLine: {
lineStyle: {
color: '#8B0000',
width: 4
}
},
axisLabel: {
color: '#8B0000',
fontSize: 14
}
},
visualMap: {
type: 'continuous',
min: 5,
max: 10,
calculable: true,
orient: 'vertical',
right: '5%',
top: 'center',
inRange: {
color: ['#ffff00', '#ff9900', '#ff0000', '#800000', '#000000']
},
textStyle: {
color: '#000'
}
},
grid: {
left: '17%',
right: '17%',
top: '10%',
bottom: '10%',
//backgroundColor: 'rgba(255, 255, 255, 0.5)'
},
graphic: [
{
type: 'image',
id: 'backgroundImage',
left: 'center',
top: 'middle',
style: {
image: '/public/img/myImage.svg',
width: 4000,
height: 750,
},
z: 1
}
]
};
@yosiasz : Could you please check the code I’ve shared.
Each computer has a different absolute (pixel - px) display size. Grafana is trying to be responsive/fluid and maximize the visualized area. So full-width panel may have an absolute size of 1k px on your computer, but it will be 4k px on my computer with a 4k monitor.
You are using absolute (px) image size, so your image will have the same size on all computers - but the panels will be different sizes. Use relative sizing instead - e.g. 100% width of panel width (not absolute 200px), so it will be also responsive. Check which CSS options can be used for that and develop it. I would say this is an advanced styling task.
1 Like
@jangaraj : Thanks for your reply. I tried your recommendation of using % but that did not help. Could you please guide more from code perspective ? what properties or parameters i can add to make this possible ? your quick help would be appreciated.Thanks !!
please provide some sample data for your dashboard
@yosiasz : i am plotting below numbers (sample)on my heatmap:
so just trying to align them with my background image so that the heatmap comes in particular place on image. i can do that individually on every machine/monitor but that does not solve the purpose if i need to align that on every machine.
your sample data does not match
dataset: context.editor.dataset,
series: context.editor.series.map(series => {
if (series.type === 'heatmap') {
return {
...series
};
}
return series;
}),
is it a machine/monitor issue or browser issue? anyways you cant expect grafana to account for every possible monitor type and monitor size and machine etc.
the onus is on you to come up with an best approach for the image to fit. as @jangaraj mentioned
Use relative sizing instead - e.g. 100% width of panel width (not absolute 200px), so it will be also responsive. Check which CSS options can be used for that and develop it. I would say this is an advanced styling task.