Styling amCharts

[richard.mortimer]

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:

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

[Jared Wiltshire]

@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/

[richard.mortimer]

@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

[CraigWeb]

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

[richard.mortimer]

@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:

Cheers

Richard

[CraigWeb]

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}}">

[Jared Wiltshire]

@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.

[richard.mortimer]

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:

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