Chart render fail

[zdary]

Hi,

we render pie chart with labels outside of the chart but the css fails. The text is enclosed by a rectangle which doesn't wrap the text properly. See the screenshot. Can we get rid of the rectangle and leave just the text?
We use GXT 4.0.2

gxt-4.0.2-css-fail.jpg


we use this code to render the chart

public class PieWidget extends Portlet {
public static final WidgetDataProperties dataModelProperties = GWT.create(WidgetDataProperties.class);
private SimpleContainer chartLayout;
private ListStore<WidgetData> listStore;
private Chart chart;

private void paintChart() {
  chartLayout = new SimpleContainer();
  add(chartLayout);
  // Setup the chart list store
listStore = new ListStore<WidgetData>(dataModelProperties.id());

  // Setup the chart
chart = new Chart<WidgetData>();
  chart.setStore(listStore);
  chart.setAnimated(true);
  chartLayout.add(chart);
  TextSprite textConfig = new TextSprite();
  textConfig.setFont("Arial");
  textConfig.setTextBaseline(TextSprite.TextBaseline.MIDDLE);
  textConfig.setFontSize(18);
  textConfig.setTextAnchor(TextSprite.TextAnchor.MIDDLE);
  textConfig.setZIndex(15);

  SeriesLabelConfig<WidgetData> labelConfig = new SeriesLabelConfig<WidgetData>();
  labelConfig.setSpriteConfig(textConfig);
  labelConfig.setLabelPosition(Series.LabelPosition.OUTSIDE);
  labelConfig.setValueProvider(dataModelProperties.name(), new StringLabelProvider<String>());

  Gradient badColor = new Gradient(45);
  badColor.addStop(new Stop(0, new RGB(166, 17, 32)));
  badColor.addStop(new Stop(100, new RGB(120, 12, 23)));
  Gradient averageColor = new Gradient(45);
  averageColor.addStop(new Stop(0, new RGB(17, 95, 166)));
  averageColor.addStop(new Stop(100, new RGB(12, 69, 120)));
  PieSeries<WidgetData> series = new PieSeries<WidgetData>();
  Gradient goodColor = new Gradient(45);
  goodColor.addStop(new Stop(0, new RGB(148, 174, 10)));
  goodColor.addStop(new Stop(100, new RGB(107, 126, 7)));
  series.addColor(badColor);
  series.addColor(averageColor);
  series.addColor(goodColor);
  series.setAngleField(dataModelProperties.value());
  series.setLabelConfig(labelConfig);
  series.setHighlighting(true);
  chart.addSeries(series);
}

private void doRepaint(List<WidgetData> data) {
  listStore.clear();
  listStore.addAll(data);
  chart.redrawChart();
}
}

Thanks a lot,
Martin

[zdary]

it turns out that the code which breaks the labels is:
textConfig.setTextBaseline(TextSprite.TextBaseline.MIDDLE);
textConfig.setTextAnchor(TextSprite.TextAnchor.MIDDLE);

just removing those lines fixes it