@mattfox Hi!
We use a json component now and its working. But if you can build a better solution, we would definitely use it.

For everyone who is looking for a solution:
Insert this in your page with the AMChart

<ma-json-store xid="colours" item="myItem"></ma-json-store>

And our json with the xid "colours" is something like:

{
    "Red": "#FF4040",
    "Orange": "#CD661D",
    "Grey": "#68838B"
}

And in the AMChart we use

series-1-color="{{myItem.jsonData.Orange}}" 

@craigweb There are often two different variants of one color. And predefined colors in the client industry. Room temperature, for example, is green. And outside temperature light green.

I have a look at your recommended JSON component way now.

@mattfox Thanks for your input.
I use a global css stylesheet via the ui-settings.
But the css class of an AMChart line is always the same. amcharts-graph-stroke or amcharts-graph-series-1 and we have 50+ charts and series-1 isn't always "blue" for example.

And if I add series-1-class="colorRed" or series-1-className="colorRed" to the chart settings isn't working. But that's what I basically need. Add my own class to every series because I already defined all my colors in my stylesheet.

@craigweb I created a colors-page with this code:

<div ng-init="colorRed='#F44336'"></div>
<div ng-init="colorRed2='#E57373'"></div>
<div ng-init="colorOrange='#EF6C00'"></div>
<div ng-init="colorOrange2='#FF9800'"></div>

And on the page with the AmCharts I used the ma-ui-page-view with the XID of the colors-page but it doesn't work. It only works if the ng-init definitions are on the same page where the chart is defined.

But I would like to have one place where I can define 20+ colors to use it on different pages / charts and SVG. I learned that CSS would be the place to do it but I cannot get it to work with amcharts CSS reference.

What is the best way to define colors for AMCharts? We have many different charts and I would like to define the colors globally in a CSS file for example.

<ma-point-values point="EZR_T" values="EZR_T_Values" rendered="true" from="dateBar.from" to="dateBar.to" rollup="AVERAGE" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}"></ma-point-values>
<ma-serial-chart flex style="width: auto; height: 450px;" 
  series-1-point="EZR_T" 
  series-1-values="EZR_T_Values" 
  series-1-color="green" 
  series-1-type="line" 
  series-1-title="Raumtemperatur"

legend="true" balloon="true" default-balloon-text="[[title]]: [[value]]" export="true" stack-type="none" options="{valueAxes:[{title:'°C'}, {title:'kW'}]}">
</ma-serial-chart>

I would like to have series-1-color="green" be something like series-1-color="{{green}}" or insert a name of a class from a stylesheet.

Is there a good way? Thanks for your help!

@craigweb You are right! Thanks!

@jared-wiltshire This works. Thank you!!

For everyone who is interested in another solution: We figured out that putting everything in one page (overview and rooms content) and use ng-show does work as well. Its a bit messy with all the code though.

Thanks again for the fast and great support here!

@jared-wiltshire That works if I use and click within the rooms tab-navigation but not if I click from the overview page navigation to a certain room e.g. room 7. It activates room7 but there is always the first tab underlined and it doesn't switch to the room 7 tab.

And this doesn't work:

<md-tab label="Room 7" ui-state="'ui.ztEzrOff02'" ui-state-params="{Raumnr:'ZT02O0070_ER002'}" ng-click="selectedTab = 7"></md-tab>

@CraigWeb Thank you for your quick answer! I can't make it work. Maybe you can apply it directly to my code example? That would help me a lot!

I created two pages. An overview page and a room detail page, where the structure is always the same, but the content is dynamic.

I used a tab navigation on both pages. The code of the navigation integrated on the overview page:

<md-tabs md-dynamic-height md-border-bottom md-swipe-content>
    <md-tab label="Overview" ui-sref="ui.ztEzrOff02DB"></md-tab>
    <md-tab label="Room 1" ui-state="'ui.ztEzrOff02'" ui-state-params="{Raumnr:'ZT02O0010_ER002'}"></md-tab>
    <md-tab label="Room 2" ui-state="'ui.ztEzrOff02'" ui-state-params="{Raumnr:'ZT02O0020_ER003'}"></md-tab>
    <md-tab label="Room 3" ui-state="'ui.ztEzrOff02'" ui-state-params="{Raumnr:'ZT02O0030_ER003'}"></md-tab>
    <md-tab label="Room 7" ui-state="'ui.ztEzrOff02'" ui-state-params="{Raumnr:'ZT02O0070_ER002'}"></md-tab>
</md-tabs>

Navigation code on the detail page to retrieve the values of the individual rooms:

<md-tabs md-dynamic-height md-border-bottom md-swipe-content>
    <md-tab label="Übersicht" ui-sref="ui.ztEzrOff02DB"></md-tab>
    <md-tab label="Room 1" ng-click="designer.parameters = {Raumnr: 'ZT02O0010_ER003'}"></md-tab>
    <md-tab label="Room 2" ng-click="designer.parameters = {Raumnr: 'ZT02O0020_ER003'}"></md-tab>
    <md-tab label="Room 3" ng-click="designer.parameters = {Raumnr: 'ZT02O0030_ER003'}"></md-tab>
    <md-tab label="Room 7" ng-click="designer.parameters = {Raumnr: 'ZT02O0070_ER002'}"></md-tab>
</md-tabs>

I have used the following guide to navigate directly to individual rooms via the link: https://help.infiniteautomation.com/linking-to-dynamic-pages

The direct navigation from the overview page to e.g. room 7 works fine, but room 7 on the detail page is then not active (underlined) in the navigation. Is there a solution for that?

Here is a screenshot of the navigation:

Thanks for your help!