Um gráfico no Flex é constituído por séries que são representações gráficas um valor de um determinado ítem. Por exemplo: um gráfico de pizza tem apenas uma série, onde cada fatia representa um valor de ítens similares (percentual de alunos entre 10 e 15 anos, entre 15 e 20, etc); um gráfico de barra pode ter duas colunas representando o valor de um mesmo ítem em anos diferentes (vendas de banana em 2004 e 2005, vendas de abacaxi em 2004 e 2005, etc), por exemplo.

O elemento principal para customizar um gráfico é o renderer, que é um elemento que define a aparência e formato de uma série, e pode conter outras propriedades, como preenchimento, contorno, transparência, etc.

Uma propriedade muito interessante das series de linha (mx:LineSeries) é o pointRenderer que permite utilizar um segundo renderer (além do padrão para a série em linha) para indicar os valores.

Há séries em que faz muito sentido configurar a linha para ser desenha em forma curva, mas eventualmente fica complicado distinguir onde está realmente localizado aquele valor. Veja no gráfico abaixo, onde propositalmente uma série está reta e na outra, curva, como pode ficar difícil de um usuário identificar o ponto onde o valor é efetivamente definido. O “tool tip” inclusive só aparece que o usuário passar o mouse exatamente naquele ponto, mais facilmente identificável quando as linhas retas.

Utilizando o pointRenderer, o código para uma das séries ficou o seguinte:

No exemplo acima, a propriedade stroke (em minúsculo!) foi definida utilizando a classe Stroke (inicial maíuscula!), que é cor da linha. O pointRenderer utilizado foi o DiamondRenderer; dentre outras possibilidades, incluem-se o CircleRenderer e o CrossRenderer. As propriedades pointFill e o pointStroke definem, respectivamente, o preenchimento e o contorno do pointRenderer definido.

O resultado ficou o seguinte:

A customização de gráficos no tocante ao visual não limita-se apenas ao look and fell agradável, mas também ajuda a construir melhores maneiras de visualizar as informações.