0

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.

RaghupathyB
  • 1
  • Welcome to Stack Overflow! Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) – mplungjan Jul 16 '23 at 06:15
  • You could try it out with plotly studio. That's always a good place to start out when creating graphs using the plotly library (which the AnyChart widget is leveraging): https://chart-studio.plotly.com/create/#/ – MWB Jul 19 '23 at 20:23

0 Answers0