I am using angular-ploty library and want plotly for line or bar graph when its round of the y axis as per data provided, the ticks having decimals should be skiped, as there won’t be any data in graph to represented.
I tried with tickformat like ‘,d’ and ‘d’ but it only eliminates the floating number after decimal, but then data in ticks is listed as 1,1,2,2,3,3
Hence is there any provision to skip duplicate y-axis because tickformat d is not doing that, or skip the ticks which are having floating numbers
Providing sample :
{
"layout": {
"margin": {
"b": 54,
"l": 110,
"r": 92,
"t": 32
},
"insidetextfont": {
"color": "var(--color-text-common-primary)"
},
"barmode": "bar",
"hovermode": "closest",
"xaxis": {
"linecolor": "rgba(208, 208, 208, 1)",
"linewidth": "0.73px",
"automargin": true,
"title": {
"text": "Time (Years)",
"font": {
"family": "var(--font-family-body-small)",
"color": "var(--color-text-common-primary)",
"size": 12
}
},
"tickcolor": "rgba(224, 224, 224, 1)",
"fixedrange": true,
"tickwidth": "0.73px",
"tickfont": {
"family": "var(--font-family-body-small)",
"size": 12
},
"range": [
]
},
"yaxis": {
"ticksuffix": " ",
"tickformat": ".0f",
"title": {
"text": "Cost (RS)",
"font": {
"size": 12,
"family": "var(--font-family-body-small)",
"color": "var(--color-text-common-primary)"
},
"standoff": 14
},
"rangemode": "tozero",
"fixedrange": true,
"tickprefix": "",
"tickfont": {
"family": "var(--font-family-body-small)",
"size": 12
},
"gridcolor": "rgba(65, 65, 65, 1)"
},
"yaxis2": {
"tickprefix": " ",
"tickformat": ".0f",
"title": {
"text": "Number of Peoples",
"font": {
"size": 12,
"family": "var(--font-family-body-small)",
"color": "var(--color-text-common-primary)"
},
"standoff": 14
},
"rangemode": "tozero",
"fixedrange": true,
"tickmode": "sync",
"autorange": true,
"tickfont": {
"family": "var(--font-family-body-small)",
"size": 12
},
"showgrid": false,
"overlaying": "y",
"side": "right"
},
"showlegend": false,
"dragmode": false,
"legend": {
"orientation": "h",
"x": 0,
"y": -0.2,
"entrywidth": 0
}
},
"config": {
"responsive": true,
"useResizeHandler": true,
"autosize": true,
"displaylogo": false,
"displayModeBar": false,
"style": {
"width": "100%",
"height": "100%"
},
"modeBarButtons": false
},
"traces": [
{
"x": [
"2024<br>",
"2025<br>",
"2026<br>",
"2027<br>",
"2028<br>",
"2029<br>",
"2030<br>",
"2031<br>",
"2032<br>",
"2033<br>",
"2034<br>"
],
"y": [
"3",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0"
],
"type": "bar",
"textposition": "none",
"name": "Cost",
"color": "rgba(102, 110, 180, 1)",
"marker": {
"color": "rgba(102, 110, 180, 1)"
},
"width": 0.22,
"hoverlabel": {
"namelength": 20,
"align": "left",
"bgcolor": "rgb(65, 65, 65)",
"bordercolor": "rgba(248, 248, 248, 1)",
"font": {
"family": "var(--font-family-body-small)",
"color": "var(--color-text-common-primary)",
"size": 12
}
},
"customdata": [
{
"year": "<b>2024<br></b>",
"cost": "3 RS",
"count": "0"
},
{
"year": "<b>2025<br></b>",
"cost": "0 RS",
"count": "1"
},
{
"year": "<b>2026<br></b>",
"cost": "0 RS",
"count": "3"
},
{
"year": "<b>2027<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2028<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2029<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2030<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2031<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2032<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2033<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2034<br></b>",
"cost": "0 RS",
"count": "0"
}
],
"hovertemplate": "<span>%{customdata.year}Cost - %{customdata.cost}<br>Peoples - %{customdata.count}</span><extra></extra>"
},
{
"x": [
"2024<br>",
"2025<br>",
"2026<br>",
"2027<br>",
"2028<br>",
"2029<br>",
"2030<br>",
"2031<br>",
"2032<br>",
"2033<br>",
"2034<br>"
],
"y": [
"0",
"1",
"3",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0"
],
"yaxis": "y2",
"type": "scatter",
"mode": "lines+markers",
"name": "Peoples",
"color": "rgba(230, 176, 86, 1)",
"marker": {
"color": "rgba(230, 176, 86, 1)"
},
"width": 0.22,
"customdata": [
{
"year": "<b>2024<br></b>",
"cost": "3 RS",
"count": "0"
},
{
"year": "<b>2025<br></b>",
"cost": "0 RS",
"count": "1"
},
{
"year": "<b>2026<br></b>",
"cost": "0 RS",
"count": "3"
},
{
"year": "<b>2027<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2028<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2029<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2030<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2031<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2032<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2033<br></b>",
"cost": "0 RS",
"count": "0"
},
{
"year": "<b>2034<br></b>",
"cost": "0 RS",
"count": "0"
}
],
"hoverlabel": {
"namelength": 20,
"align": "left",
"bgcolor": "rgb(65, 65, 65)",
"bordercolor": "rgba(248, 248, 248, 1)",
"font": {
"family": "var(--font-family-body-small)",
"color": "var(--color-text-common-primary)",
"size": 12
}
},
"hovertemplate": "<span>%{customdata.year}Cost - %{customdata.cost}<br>Peoples - %{customdata.count}</span><extra></extra>"
}
],
"legendName": [
{
"name": "Cost",
"color": "rgba(102, 110, 180, 1)",
"shape": "circle",
"idx": 1
},
{
"name": "Peoples",
"color": "rgba(230, 176, 86, 1)",
"shape": "circle",
"idx": 2
}
]
}