Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.
Angular JS AMcharts Theme
-
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'}]}"
-
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.
-
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'}]}"
-
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. -
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. -
Will this work the same way to make an area chart? Can I load that in the app.js too?
-
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.
-
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?
-
@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.