CODEWITHSUNDEEP
javascriptplotlyplotly.js
Adithya Sai
Adithya Sai

Reputation: 1740

Change z index label in plotly js

I want to change the z-index label in plotlyjs I am using the following code. It currently shows X,Y,Z on hover. X, Y values are good. I want to know if there is some way where we can change the value label of Z? On hover on the graph I want Z to be shown as 'Value'. How to get that?

var data = [ {
  z: [[10, 10.625, 12.5, 15.625, 20],
       [5.625, 6.25, 8.125, 11.25, 15.625],
       [2.5, 3.125, 5., 8.125, 12.5],
       [0.625, 1.25, 3.125, 6.25, 10.625],
       [0, 0.625, 2.5, 5.625, 10]],
  type: 'contour',
  colorscale: [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']]
}
];

var layout = {
  title: 'Custom Contour Plot Colorscale'
};

Plotly.newPlot('myDiv', data, layout);

Upvotes: 1

Views: 1669

Answers (1)

mit
mit

Reputation: 1340

Try the hovertemplate option (https://plot.ly/javascript/reference/#contour-hovertemplate):

var data = [ {
  z: [[10, 10.625, 12.5, 15.625, 20],
       [5.625, 6.25, 8.125, 11.25, 15.625],
       [2.5, 3.125, 5., 8.125, 12.5],
       [0.625, 1.25, 3.125, 6.25, 10.625],
       [0, 0.625, 2.5, 5.625, 10]],
  type: 'contour',
  colorscale: [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']],
   hovertemplate: 'x: %{x}, y: %{y}, Value: %{z}<extra></extra>'
}
];

var layout = {
  title: 'Custom Contour Plot Colorscale'
};

Plotly.newPlot('myDiv', data, layout);
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.49.5/plotly.min.js"></script>
<div id=myDiv>

</div>

Upvotes: 1

Related Questions