Q:

Format styles based on some conditions in highcharts

I am developing a chart for an app(android/ios) . I want to style the graph based on some condition , like if the OS is android , the font size should be 14dp and if OS is iphone , it should be 9dp . I get the osname as parameter in the function , I am able to set some chartproperties , but I am not able to change the fontsize and other properties of x axis and y axis based on the osname parameter . Please help in setting the properties for x and y axis .
<!DOCTYPE html>
<html>
    <head>
        <script src="./jquery.min.jsl"></script>
        <script src="./highcharts.jsl"></script>
        <script src="./highcharts-more.jsl"></script>
        <meta name="viewport" content="user-scalable=no">

        <script >
            function renderGraph(graphdata, osname) {

                var parsed = JSON.parse(graphdata);
                alert(osname);
                var s1 = [];
                var s2 = [];
                var s3 = [];
                var s4 = [];
                var s5 = [];
                var s6 = [];
                var cat = [];
                for (var i = 0; i < parsed.length; i++) {
                    cat.push(parsed[i].QUARTER);
                    s1.push(parsed[i].FTE_OPEX);
                    s2.push(parsed[i].FTE_CAPEX);
                    s3.push(parsed[i].AWF_OPEX);
                    s4.push(parsed[i].AWF_CAPEX);
                    s5.push(parsed[i].HW_SW);
                    s6.push(parsed[i].OTHERS);
                };

                var chartProperties = {};
                // height of chart
                var graphHeight = 0;
                // width of chart
                var graphWidth = 0;

                // Separating the graph dimensions & styling properties as per OS name & version
                if (osname == "iphone") {
                    chartProperties = {
                        type : 'column',
                        plotBackgroundColor : null,
                        plotBackgroundImage : null,
                        plotBorderWidth : 0,
                        plotShadow : false,
                        height : 250,
                        width : 300,
                        marginLeft : 30,

                    };
                } else if (osname == "android") {
                    chartProperties = {
                        type : 'column',
                        plotBackgroundColor : null,
                        plotBackgroundImage : null,
                        plotBorderWidth : 0,
                        plotShadow : false,
                        height : 700,
                        marginLeft : 80,
                        marginTop : 50,
                        marginBottom : 100
                    };
                }
                ;

                Highcharts.setOptions({
                    lang : {
                        numericSymbols : ["K", "M", "G", "T", "P", "E"]
                    }
                });

                $(function() {
                    $('#container').highcharts({
                        colors : ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
                        chart : chartProperties,
                        title : {
                            text : ''
                        },
                        xAxis : {

                            categories : cat,
                            tickmarkPlacement : 'on',
                            tickWidth : 0,
                            labels : {
                                y : 20,
                                style : {
                                    color : '#333333',
                                    fontSize : '9dp',
                                    fontFamily : 'Metropolis-Light',
                                    opacity : '.6'
                                },

                            }

                        },
                        yAxis : {
                            gridLineWidth : 0,
                            min : 0,
                            offset : 10,
                            tickAmount : 5,
                            title : {
                                text : ''
                            },
                            labels : {
                                align : 'left',
                                style : {
                                    color : '#333333',
                                    fontSize : '9dp',
                                    fontFamily : 'Metropolis-Light',
                                    opacity : '.5'
                                },
                                formatter : function() {
                                    var value = this.axis.defaultLabelFormatter.call(this);
                                    return '$' + (this.value === 0 ? '0K' : value);
                                }
                            },

                            stackLabels : {
                                style : {
                                    color : '#555555',
                                    fontSize : '11dp',
                                    fontFamily : 'Metropolis-Regular'

                                },

                                enabled : true,
                                formatter : function() {
                                    if (this.total < 1000) {
                                        return '$' + this.total;
                                    } else {
                                        return '$' + (this.total / 1000).toFixed(2) + 'K';
                                    };

                                }
                            },

                        },
                        legend : {
                            enabled : false
                        },
                        tooltip : {
                            enabled : false
                        },

                        plotOptions : {
                            series : {
                                animation : false
                            },
                            column : {
                                stacking : 'normal',
                                dataLabels : {
                                    enabled : false,
                                    color : (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                                }
                            }
                        },
                        credits : {
                            enabled : false
                        },
                        series : [{
                            name : 'FTE-OpEx',
                            data : s1,
                            index : 0,
                            pointWidth : 20

                        }, {
                            name : 'FTE-CapEx',
                            data : s2,
                            index : 1,
                            pointWidth : 20
                        }, {
                            name : 'AWF-OpEx',
                            data : s3,
                            index : 2,
                            pointWidth : 20
                        }, {
                            name : 'AWF-CapEx',
                            data : s4,
                            index : 3,
                            pointWidth : 20
                        }, {
                            name : 'HW/SW',
                            data : s5,
                            index : 4,
                            pointWidth : 20
                        }, {
                            name : 'Other',
                            data : s6,
                            index : 5,
                            pointWidth : 20
                        }]
                    });
                });
            }
        </script>
    </head>

    <body id="body">
        <div id="container" style="height: 100%; width: 100%; position: center; margin-left: 3%;"></div>
    </body>
</html>

A:

Font size and other properties can be updated as the same way you are doing with the chart properties.
function updateChart(obj) {
   if (obj.value == "iphone") {
    yAxisLabelst={
    fontSize:'7px',
    color:'green',
    cursor:'pointer',
    }
     chartProperties = {
       type: 'column',
       plotBackgroundColor: null,
       plotBackgroundImage: null,
       plotBorderWidth: 0,
       plotShadow: false,
       height: 250,
       width: 300,
       marginLeft: 30,

     };
   } else if (obj.value == "android") {
    yAxisLabelst={
    fontSize:'15px',
    color:'green',
    cursor:'pointer',
    }
     chartProperties = {
       type: 'column',
       plotBackgroundColor: null,
       plotBackgroundImage: null,
       plotBorderWidth: 0,
       plotShadow: false,
       height: 700,
       marginLeft: 80,
       marginTop: 50,
       marginBottom: 100
     };
   }

   drawChart(chartProperties,yAxisLabelst)
 }

function updateChart(obj) {
   if (obj.value == "iphone") {
    yAxisLabelst={
    fontSize:'7px',
    color:'green',
    cursor:'pointer',
    }
     chartProperties = {
       type: 'column',
       plotBackgroundColor: null,
       plotBackgroundImage: null,
       plotBorderWidth: 0,
       plotShadow: false,
       height: 250,
       width: 300,
       marginLeft: 30,

     };
   } else if (obj.value == "android") {
    yAxisLabelst={
    fontSize:'15px',
    color:'green',
    cursor:'pointer',
    }
     chartProperties = {
       type: 'column',
       plotBackgroundColor: null,
       plotBackgroundImage: null,
       plotBorderWidth: 0,
       plotShadow: false,
       height: 700,
       marginLeft: 80,
       marginTop: 50,
       marginBottom: 100
     };
   }

   drawChart(chartProperties,yAxisLabelst)
 }

 Highcharts.setOptions({
   lang: {
     numericSymbols: ["K", "M", "G", "T", "P", "E"]
   }
 });

 function drawChart(chartProperties,yAxisLabelst) {

   Highcharts.chart('container', {
     chart: chartProperties,
     title: {
       text: 'Solar Employment Growth by Sector, 2010-2016'
     },

     subtitle: {
       text: 'Source: thesolarfoundation.com'
     },

     yAxis: {
       title: {
         text: 'Number of Employees'
       },
       labels:{
       style:yAxisLabelst
       }
     },
     legend: {
       layout: 'vertical',
       align: 'right',
       verticalAlign: 'middle'
     },

     plotOptions: {
       series: {
         label: {
           connectorAllowed: false
         },
         pointStart: 2010
       }
     },

     series: [{
       name: 'Installation',
       data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
     }, {
       name: 'Manufacturing',
       data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
     }, {
       name: 'Sales & Distribution',
       data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
     }, {
       name: 'Project Development',
       data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
     }, {
       name: 'Other',
       data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
     }],

     responsive: {
       rules: [{
         condition: {
           maxWidth: 500
         },
         chartOptions: {
           legend: {
             layout: 'horizontal',
             align: 'center',
             verticalAlign: 'bottom'
           }
         }
       }]
     }

   });


 }
#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<select onchange="updateChart(this)">
  <option value="" >Select Device </option>
  <option value="iphone" >iphone</option>
  <option value="android">android</option>
</select>
<div id="container"></div>

