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

  • Hi,

    Is there any way to style the amCharts output? Specifically I'm trying to get rid of the X-axis on the trend line graphic below:

    0_1555047059361_fuel_trend.png

    I've tried to set the options as below, but that returns the date in a unix-style time format, rather then removing it:

     options="{categoryAxis:[{labelsEnabled: false, fontSize: '0'}],valueAxes:[{ unit: '%'}]}">
    

    Can anyone point me in the corect direction for this?

    Also I'd like to make the background canvas slightly smaller, but can't see the correct style to address - is there any documentation on the styles/style names used by amCharts (I couldn't see anything documented on their site).

    Thanks

    Richard


  • @richard-mortimer said in Styling amCharts:

    Specifically I'm trying to get rid of the X-axis on the trend line graphic below:

    Do you want to hide the whole axis or just the labels?

    @richard-mortimer said in Styling amCharts:

    Also I'd like to make the background canvas slightly smaller,

    What do you mean the "background canvas"? Do you mean changing the size of the whole chart?

    @richard-mortimer said in Styling amCharts:

    is there any documentation on the styles/style names used by amCharts (I couldn't see anything documented on their site).

    Use the chrome debugger to inspect the AmCharts SVG elements and see their classes. This is by far the easiest way IMO, but there is also https://www.amcharts.com/docs/v3/tutorials/css-class-names/


  • @jared-wiltshire said in Styling amCharts:

    @richard-mortimer said in Styling amCharts:

    Specifically I'm trying to get rid of the X-axis on the trend line graphic below:

    Do you want to hide the whole axis or just the labels?

    @richard-mortimer said in Styling amCharts:

    Also I'd like to make the background canvas slightly smaller,

    What do you mean the "background canvas"? Do you mean changing the size of the whole chart?

    @richard-mortimer said in Styling amCharts:

    is there any documentation on the styles/style names used by amCharts (I couldn't see anything documented on their site).

    Use the chrome debugger to inspect the AmCharts SVG elements and see their classes. This is by far the easiest way IMO, but there is also https://www.amcharts.com/docs/v3/tutorials/css-class-names/

    Thanks - that last link was perfect!!

    Cheers

    Richard


  • options=" categoryAxis:{labelsEnabled:false, gridAlpha: 0, axisAlpha: 0}"
    I believe this is what you looking for, not sure didnt test it.


  • @craigweb said in Styling amCharts:

    options=" categoryAxis:{labelsEnabled:false, gridAlpha: 0, axisAlpha: 0}"
    I believe this is what you looking for, not sure didnt test it.

    Thanks for the suggestion, but unfortunately that didn't work either; returns the dates in Unix style format:

    options="{categoryAxis:[{labelsEnabled:false,gridAlpha:'0',axisAlpha:'0'}]}"
    

    Produces:

    0_1555376754148_example.png

    Cheers

    Richard


  • Not sure if you have come right yet but this is how I did it.

    <ma-serial-chart style="height: 250px; width: 100%" series-1-values="bin1Temp" series-1-point="designer.points | filter:{deviceName:'Bin 1',name:'Temperature'}:true | maFirst" series-1-type="line" series-1-color="red" legend="true" balloon="true" options="{autoMargins: false, marginBottom: 30, categoryAxis:{labelsEnabled:false, gridAlpha: 0, axisAlpha: 0}}">

    0_1555398753805_untitled (9).png


  • @richard-mortimer said in Styling amCharts:

    options="{categoryAxis:[{labelsEnabled:false,gridAlpha:'0',axisAlpha:'0'}]}"

    Your 0 are surrounded by single quotes which means they are strings, you want numbers not strings. See @CraigWeb 's example.


  • Thanks for the suggestions, I ultimately went a different route with this, and bound a slider to the variable that was previously at the top of the page (which was 30 in the first instance) and allowed the user to select how many days worth of data they wanted to see:

    0_1555463825065_014_days.png 0_1555463829221_070_days.png 0_1555463838062_112_days.png 0_1555463848343_500_days.png

    The text box is also editable, so they can manually type a number in, if they wish (the '500' example at the end). I did use some of the styles suggested to modify the axes to a different grey to lessen it's impact upon the page, but it also meant that the X-axes date was relevant again, so the requirement to remove it changed (let's just call it 'agile development :). The slider modifies about 10 graphs across the page and works quite fast.

    Cheers

    Richard