1. #1
    Ext GWT Premium Member
    Join Date
    Dec 2010
    Location
    New York, NY
    Posts
    116
    Vote Rating
    0
    amit.vankadia is on a distinguished road

      0  

    Default Chart Legend doesn't resize when user resize browser and legend will get cut off.

    Chart Legend doesn't resize when user resize browser and legend will get cut off.


    We are using PieChart with Legend. We have some names which are longer and it renders beautifully when it is a fully maximized.

    When user resize browser it gets cut off. Is there any way we can resize legend along with chart.

  2. #2
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Do you have a small testcase that implements EntryPoint and exactly demonstrates your problem?

    I will move this thread to the bugs forum so we can take a look.

  3. #3
    Ext GWT Premium Member
    Join Date
    Dec 2010
    Location
    New York, NY
    Posts
    116
    Vote Rating
    0
    amit.vankadia is on a distinguished road

      0  

    Default


    Browser resizing doesn't behave smoothly with legend.

    Code:
    public class MySampleApplication implements IsWidget, EntryPoint {
    
    
        @Override
        public Widget asWidget() {
            // reduce the padding on text element as we have widgets in the cells
            ListStore<String> store = new ListStore<String>(new ModelKeyProvider<String>() {
                @Override
                public String getKey(String item) {
                    return item;
                }
            });
    
    
            store.add("Testing Testing");
            store.add("Testing DEF");
            store.add("ABC Testing");
            store.add("Testing ABC");
    
    
    
    
            Chart<String> qualityMetricsChart = new Chart<String>();
            qualityMetricsChart.bindStore(store);
            qualityMetricsChart.setDefaultInsets(50);
            qualityMetricsChart.setShadowChart(true);
    
    
            final PieSeries<String> series = new PieSeries<String>();
            series.setAngleField(new ValueProvider<String, Number>() {
                @Override
                public Number getValue(String object) {
                    return Math.random();
                }
    
    
                @Override
                public void setValue(String object, Number value) {
    
    
                }
    
    
                @Override
                public String getPath() {
                    return "ABC";
                }
            });
    
    
            TextSprite textConfig = new TextSprite();
            textConfig.setTextBaseline(TextSprite.TextBaseline.MIDDLE);
            textConfig.setTextAnchor(TextSprite.TextAnchor.MIDDLE);
            textConfig.setFontSize(18);
            textConfig.setZIndex(15);
    
    
            SeriesLabelConfig<String> labelConfig = new SeriesLabelConfig<String>();
            labelConfig.setSpriteConfig(textConfig);
            labelConfig.setLabelPosition(Series.LabelPosition.START);
            labelConfig.setValueProvider(new ToStringValueProvider<String>(), new StringLabelProvider<String>());
    
    
            series.setLabelConfig(labelConfig);
            series.setDonut(35);
            series.setHighlighting(true);
            series.setLegendValueProvider(new ToStringValueProvider<String>(), new StringLabelProvider<String>());
    
    
            qualityMetricsChart.addSeries(series);
    
    
            addColorToChart(series, "slice1", "#94AE0A");
            addColorToChart(series, "slice2", "#115FA6");
            addColorToChart(series, "slice3", "#A61120");
            addColorToChart(series, "slice4", "#FF8809");
    
    
            final Legend<String> legend = new Legend<String>();
            legend.setItemHighlighting(true);
    
    
            qualityMetricsChart.setLegend(legend);
    
    
            BorderLayoutContainer c = new BorderLayoutContainer();
            c.setCenterWidget(qualityMetricsChart);
    
    
            Viewport port = new Viewport();
            port.setWidget(qualityMetricsChart);
    
    
            return port;
        }
    
    
        private void addColorToChart(PieSeries<String> series, String name, String color) {
            Gradient gradient = new Gradient(name, 45);
            gradient.addStop(new Stop(0, new RGB(color)));
            Chart<String> chart = series.getChart();
            chart.addGradient(gradient);
            series.addColor(gradient);
        }
    
    
        @Override
        public void onModuleLoad() {
            RootPanel.get().add(asWidget());
        }
    }

  4. #4
    Sencha - GXT Dev Team BrendanC's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Vote Rating
    3
    BrendanC is on a distinguished road

      0  

    Default


    I moved this out of the bug forums as it is more of a feature request. Currently legend only updates its position based on the chart insets and size, while the legend size is determined by what is inside of it. I will keep the ticket as a possible feature in a future release. For the time being you could make a workaround where you set the length of the series legend titles based on the size of the chart.

Thread Participants: 2