i want to show the value of bar chart continuously

0
Hello,   Can we add labels to the bar chart (above or on the bar) instead of viewing them on hover? and my data is dynamic  user enters the data and  graphs will be updated daily.  
asked
1 answers
0

Hey Rutuja,

 

Yes, you can do this, however, to achieve this it is best to use the AnyChart widget, which is fully customizable.

 

example.jpg

 

Example json that you can use to build it:

 

[
  {
    "x": [
      "X Label"
    ],
    "y": [
      25
    ],
    "text": [
      "example text inside bar"
    ],
    "name": "Red",
    "type": "bar",
    "hovertemplate": "%{y:.1f}%",
    "textposition": "inside",
    "texttemplate": "",
    "textangle": 0,
    "marker": {
      "color": "Red"
    }
  },
  {
    "x": [
      ""X Label""
    ],
    "y": [
      25
    ],
    "text": [
      "example text inside bar"
    ],
    "name": "Yellow",
    "type": "bar",
    "hovertemplate": "%{y:.1f}%",
    "textposition": "inside",
    "texttemplate": "",
    "textangle": 0,
    "marker": {
      "color": "Yellow"
    }
  },
  {
    "x": [
      ""X Label""
    ],
    "y": [
      25
    ],
    "text": [
      "example text inside bar"
    ],
    "name": "Green",
    "type": "bar",
    "hovertemplate": "%{y:.1f}%",
    "textposition": "inside",
    "texttemplate": "",
    "textangle": 0,
    "marker": {
      "color": "Green"
    }
  },
  {
    "x": [
      ""X Label""
    ],
    "y": [
      25
    ],
    "text": [
      "example text inside bar"
    ],
    "name": "Grey",
    "type": "bar",
    "hovertemplate": "%{y:.1f}%",
    "textposition": "inside",
    "texttemplate": "",
    "textangle": 0,
    "marker": {
      "color": "Grey"
    }
  }
]

 

  1. "x": The label on the X-axis for each bar. In your case, for all data series, the label is "X Label".

  2. "y": The value on the Y-axis, which represents the height of each bar. In your example, the Y-value for each series is 25.

  3. "text": The text displayed inside each bar. For all data series, it's "example text inside bar".

  4. "name": The name of each data series. This name will be displayed in the legend of the chart for each bar.

  5. "type": The type of chart, in this case, it's set to "bar" indicating a bar chart.

  6. "hovertemplate": The template shown when hovering over each bar. %{y:.1f}% formats the Y-value with one decimal place and adds a percentage sign.

  7. "textposition": Specifies the position of the text inside the bar. In your case, it's set to "inside".

  8. "texttemplate": The template for the displayed text. It's empty in your case, meaning the default text will be used.

  9. "textangle": The angle at which the text is displayed. It's set to 0 degrees, meaning horizontally.

  10. "marker": Properties of the markers (bars) including color. Each data series has a different bar color (red, yellow, green, grey).

answered