This is my Data.JSON
[
{
"x": ["2017", "2018", "2019", "2020", "2021", "2022"],
"y": [0.010101, -0.21070779, 0.120275834, -0.190362337, -0.391092741],
"yaxis": "y2",
"hovertemplate": "Priedce: %{y:$.2f}<extra></extra>",
"type": "scatter",
"width": 0.2,
"name": "Red",
"marker": {
"size": 10,
"color": "rgb(20,79,141)"
}
},
{
"x": ["2017", "2018", "2019", "2020", "2021", "2022"],
"y": [12289, 9795, 9082, 8914, 5401],
"type": "bar",
"width": 0.25,
"name": "Red",
"hovertemplate": "Pricede: %{y:$.2f}<p>Hello</p><extra></extra>",
"marker": {
"color": "rgb(0,206,255)",
"background-color": "Red",
"opacity": 0.5
}
},
{
"x": ["2017", "2018", "2019", "2020", "2021", "2022"],
"y": [68126, 53771, 47300, 38210, 23260],
"width": 0.25,
"hovertemplate": "Priedce: %{y:$.2f}<extra></extra>",
"type": "bar",
"marker": {
"color": "rgb(180,223,255)",
"background-color": "Red",
"opacity": 0.5
}
},
{
"x": ["2017", "2018", "2019", "2020", "2021", "2022"],
"y": [-0.010101, 0.202945724, -0.072792241, -0.018498128, -0.39409917],
"yaxis": "y2",
"hovertemplate": "Priedce: %{y:$.2f}<extra></extra>",
"type": "scatter",
"marker": {
"size": 10,
"color": "rgb(22,158,199)"
}
}
]
This is my layout.JSON. In this is use label function inside the shape but the label is not showing in the UI. Apart from the label everything is working fine. I got reference from Adding labels to shapes.
{
"barmode": "group",
"hoverinfo":true,
"hoverlabel": {
"bgcolor": "#FFF",
"bordercolor": "rgba(58,200,225,.5)",
"font": {
"color": "black",
"size": 12.5
}
},
"xaxis": {
"tickformat": "d"
},
"yaxis": {
"title": {
"text": "Volume (EU)",
"standoff": 45
},
"showgrid": true,
"range": [-1, 81000]
},
"yaxis2": {
"title": {
"text": "Volume Growth (%)",
"standoff": 45,
"font": {
"size": 15
}
},
"showgrid": false,
"overlaying": "y",
"tickformat": "+5.0%",
"zeroline": false,
"font": {
"family": "Courier New, monospace",
"size": 70
},
"yref": "paper",
"automargin": true,
"side": "right"
},
"showlegend": true,
"legend": {
"orientation": "h",
"y": "-5"
},
"shapes": [
{
"type": "rect",
"layer": "below",
"Text": "hello",
"xref": "x",
"yref": "paper",
"x0": "2016.5",
"y0": 0,
"x1": "2017.5",
"y1": 1,
"fillcolor": "#f3f3f3",
"opacity": 0.5,
"line": {
"width": 2,
"opacity": 1,
"color": "#9965e2"
},
"label": {
"text": "testing",
"font": {
"size": 10,
"color": "black"
},
"yanchor": "top"
}
},
{
"type": "line",
"layer": "below",
"xref": "x",
"yref": "paper",
"x0": "2021.5",
"y0": 0,
"x1": "2022.5",
"y1": 1,
"fillcolor": "#ecfff7",
"opacity": 1,
"line": {
"width": 0
},
"label": {
"text": "Volume Growth (%)",
"yanchor": "top"
}
}
],
"annotations": [
{
"x": 2024,
"xref": "x",
"text": "Annotation Text",
"textposition": "top",
"yanchor":"top"
}
]
}
I using this code in AnyChart widget which is in Mendix version(8.13.1). Please help me in this.
