I use an example from plotly community(Sorry I forget the source…) and do modifications on it. I adjust the opacity and found a line shows up. How can I remove this line?
Code:
<!doctype html>
I use an example from plotly community(Sorry I forget the source…) and do modifications on it. I adjust the opacity and found a line shows up. How can I remove this line?
Code:
<!doctype html>
Code
var options = [“A”, “B”, “C”];
var table_data = [];
var yValues = options;
var zValuesOne = [1,2,3];
var zValuesTwo = [6,7,8];
var count = 0;
var annotations = []
var nc = -1
var layout = {
annotations: [],
xaxis: {
ticks: ‘’,
side: ‘bottom’,
tickvals: [0, 1],
showgrid: false,
ticktext: [‘X1’, ‘X2’]
},
yaxis: {
ticks: ‘’,
ticksuffix: ’ ',
width: 700,
height: 700,
showgrid: false,
autosize: false
}
};
var countx = 0;
var tmp_count = [0,1,2];
var cat = [‘X1’, ‘X2’];
tmp_count.forEach(function(i) {
nc++;
for (var x = 0; x < cat.length; x++) {
catVar = cat[x]
smt = options[i]
if (x == 0) {
txt = zValuesOne[nc]
} else {
txt = zValuesTwo[nc]
}
var result = {
xref: 'x1',
yref: 'y1',
x: x,
y: options[i],
text: txt,
font: {
family: 'Arial',
size: 12,
color: 'rgb(50, 171, 96)'
},
showarrow: false,
// font: {
// color: textColor
// }
};
layout.annotations.push(result);
}
})
var cat = [‘Page Views/Sessions’, ‘Avg. Time on Site’];
var data = [{
type: ‘heatmap’,
x: [0],
y: options,
z: [zValuesOne],
transpose: true,
colorscale: [
[0, ‘rgba(165,0,38,0.2)’],
[0.2, ‘rgba(165,0,38,0.4)’],
[0.4, ‘rgba(165,0,38,0.6)’],
[0.6, ‘rgba(165,0,38,0.7)’],
[0.8, ‘rgba(165,0,38,0.9)’],
[1, 'rgba(165,0,38,1.0)']
],
showscale: false
}, {
type: ‘heatmap’,
x: [1],
y: options,
z: [zValuesTwo],
transpose: true,
colorscale: [
[0, ‘rgba(165,0,38,0.4)’],
[0.2, ‘rgba(165,0,38,0.45)’],
[0.4, ‘rgba(165,0,38,0.5)’],
[0.6, ‘rgba(165,0,38,0.55)’],
[0.8, ‘rgba(165,0,38,0.6)’],
[1, 'rgba(165,0,38,0.61)']
],
showscale: false
}
]
Plotly.newPlot(‘graph’, data, layout)
It’s https://plot.ly/javascript/reference/#layout-xaxis-zeroline that’s showing below your semi-transparent heatmaps.
Setting it to false
as in https://codepen.io/etpinard/pen/MxZXYv?editors=1010 should give you the desired results.
Thank you! It works!