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.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

How to make the theme option working in the Amchart


  • Hi,

    I am trying to change the theme option in any of the chart but it seems that it didn't work. I had folowwed instructions as what you mentioned to load the amCharts theme in the app.js but it didn';t work either.

    In my app.js file,

    /**

    define([
    'angular',
    'mango-3.3/maMaterialDashboards',
    'mango-3.3/maAppComponents',
    'require',
    './services/Page',
    './directives/pageView/pageView',
    './directives/liveEditor/livePreview',
    'moment-timezone',
    'angular-ui-router',
    'oclazyload',
    'angular-loading-bar',
    './views/docs/docs-setup',
    'amcharts/themes/dark'
    ], function(angular, maMaterialDashboards, maAppComponents, require, Page, pageView, livePreview, moment) {
    'use strict';....

    I added the that line which you mentioned at the end. However, there is no effect on the chart colour.
    Please see the chart option as below:

    ma-serial-chart style="height: 300px; width: 100%" series-1-values="point1Values" series-1-point="point1" legend="true" balloon="true" export="true"
    options="{theme: 'dark', chartScrollbar:{'enabled': true, 'scrollbarHeight': 5}, export: {'position': 'bottom-right'}, valueAxes: [{'id': 'ValueAxis-1','color': '#FFFFFF'}]}"

    </ma-serial-chart>

    Can you please see what other settings need to be done in order for the theme to work in the chart? Thanks alot.

    Regards,
    Mok Kiew