amcharts: legend's parts overlap

Question

I have stock chart and first legend's item is OHLC which is displayed like this:

o:60.11, h:70.11, l:40.11, c:50.11

other legend's items are short like this

55.11

If I want to legend items not overlap, I need to set legend.valueWidth or legend.spacing as long as is needed for to the first item not overlap the second. Than other items has the same space which is not needed and sometime legend is on two rows.

What I want to achieve is that every legend item will have only space it needs or to set extraspace for first item.

score 1 · Answer 1 · edited Oct 21 '13 at 07:55

1

Keep your legend div separate from chart div and then add legend div to chart

chart.addLegend(legend, "legenddiv");

edited Oct 21 '13 at 07:55

Harry

87,580
25
202
214

answered Oct 21 '13 at 07:40

LHH

3,233
1
20
27

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

Try reducing "labelWidth" and "valueWidth" to fit just the content : source

edited May 23 '17 at 12:32

Community

1
1

answered Sep 25 '16 at 13:07

saber tabatabaee yazdi

4,404
3
42
58

score 0 · Answer 3 · answered Mar 31 '17 at 10:11

Use this property : markerLabelGap markerLabelGap : Number Space between legend marker and legend text, in pixels.

Sample amchart:

 var chart = AmCharts.makeChart("chartdiv", {

            "type": "serial", "theme": "light",
            "legend": {
                "equalWidths": false,/*نمایش آیتم ها در یک سطر  */
                "pulled":true,
                "align": "left",
               
                "position": "bottom",
             
                "markerType": "circle",
              
                "labelText": "[[title]]",             
                "rollOverGraphAlpha":80,
                "markerLabelGap": 80,//تعیین فاصله بین مارکر و لیبل ها در لجند
              
                "textClickEnabled": true
            },
             ...

See More Properties: https://docs.amcharts.com/javascriptstockchart/LegendSettings

amcharts: legend's parts overlap

3 Answers3