Setting different Chart DataTip styles in Flex Components

Question

I have a following issue:My task is to style a datatip for two charts in Flex 4.5.Both charts reside in two different <Group> based components which are added to the <Application>

So after a thorough research here is what I tried to do.First applying a css descending selectors:

#container#chart1 chartClasses|DataTip{     
    backgroundColor:white;
    backgroundAlpha:0.01;
    fontSize: 12; 
    fontWeight:bold;
    fontStyle:italic; 
}

So the component with Id=container and inside it a chart with id="chart1" It doesn't work despite the fact that Adobe docs say it should. Another approach which I believed was supposed to solve it was to put this CSS style

chartClasses|DataTip{
    backgroundColor:white;
    backgroundAlpha:0.01;
    fontSize: 12; 
    fontWeight:bold;
    fontStyle:italic; 
}

inside each of these components but guess what,chart DataTip class selector work only on <Application> level(and then it applies the same style to all chart datatips found in the application.So putting it in each of the two components containing the charts has no effect.

Next ,I created a class that is fed into dataTipRenderer style of the chart.Then inside the class called MyCustomDataTipRenderer I set the class selector :

.dataTip{
    backgroundColor:white;
    backgroundAlpha:0.01;
    fontSize: 12; 
    fontWeight:bold;
    fontStyle:italic; 
}

And yes ,it works.But let's say I want to be able to set different styles for the custom datatip renderer based on the hosting chart.How can I do it ? It seems the Flex SDK has not exposed in any way thr datatipRenderer.So If I effectively set the custom datatip renderer like this:

columnchart1.setStyle("dataTipRenderer",CustomDataTip); 

Then I would like to be able to get access to the instance of the CustomDataTip class.But I can't .So currently the only thing I can do is to create a distinct custom datatip renderer class for each chart.That could be fine if you have only a couple of charts you want to style but what can we do if we have many of them?

Answer 1

Try adding the following to the starting of the css file(Assuming that the name of the file is chartStyles.css)

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "http://www.adobe.com/2006/mxml";

mx|#container#chart1 chartClasses|DataTip{     
    backgroundColor:white;
    backgroundAlpha:0.01;
    fontSize: 12; 
    fontWeight:bold;
    fontStyle:italic; 
}

s|#container#chart1 chartClasses|DataTip{     
    backgroundColor:white;
    backgroundAlpha:0.01;
    fontSize: 12; 
    fontWeight:bold;
    fontStyle:italic; 
}

Incase the css styles are put in a style tag right in the main applications mxml , then there is no need for a @namespace tag in the beginning.You can directly add mx| and s| as prefixes to your styles.