Angular JS AMcharts Theme

[atkins.chrisw]

How do i set the theme? I am trying to get the borders and the ValueAxes to be the color white. Here is what I have tried.

options="{ {'theme': 'dark'}, chartScrollbar:{'enabled': true, 'scrollbarHeight': 5}, export: {'position': 'bottom-right'}, valueAxes: [{'id': 'ValueAxis-1','color': '#FFFFFF'}]}"

[phildunlap]

Jared may be able to answer better than I, but there is no key to the first item in your object, which could be a problem.

[Jared Wiltshire]

As Phillip said your syntax is incorrect, it should be

options="{theme: 'dark', chartScrollbar:{'enabled': true, 'scrollbarHeight': 5}, export: {'position': 'bottom-right'}, valueAxes: [{'id': 'ValueAxis-1','color': '#FFFFFF'}]}"

[atkins.chrisw]

I tried that too. It does not like it.
I'm wondering if it has to do with this being in the main div section of the am-charts creation.

[Jared Wiltshire]

OK so you need to load the amCharts theme file in your app.js, at the top of app.js add

'amcharts/themes/dark'

To the end of the define([]) array.

[atkins.chrisw]

Will this work the same way to make an area chart? Can I load that in the app.js too?

[Jared Wiltshire]

I'm not sure what exactly you mean. An area chart is created by setting the fillAlphas property of a "graph" in amCharts. You can't currently do this through our directives without making the graph stacked.

What you could do is make a modification to serialChart.js like such:

function defaultLineGraph() {
    return {
        fillAlphas: 0.01, // set this to 0.01
        lineAlpha: 0.8,
        lineThickness: 2.0
    };
}

Then play with the CSS to set the opacity of individual graphs, e.g. -

    .amcharts-graph-series-1 .amcharts-graph-fill {
        fill-opacity: 0.5;
        fill: red;
    }

I will make it easier to set these properties on individual graphs in the next release of the dashboards module.

[atkins.chrisw]

Is there a way I can make a new ma-gauge-chart2 that will look at a new serialchart.js that way I can basically make a chart type for each one?

[Jared Wiltshire]

@atkins.chrisw
Sure you can definitely do this by defining a new angular directive, however helping you with this is outside of the scope of the forum's free support. I would suggest looking at the way that the menu directives are loaded in the adminTemplate.