x-axis and y-axis title,label styles issue

<p>Hi,</p>
<p> </p>
<p>i am trying to set x-axis and y-axis title and label font and color via chart script in bar chart. I have written below script for x-axis and it is applying the styles what it is in script. whereas if applied the same logic to y-axis i getting the problem.i just replaced xAixis to yAxis in the below script. is there any issue with styles script or any bug.</p>
<p> </p>
<p>I am using the HTML5 charts in brd 4.2 version. can any body suggest.</p>
<p> </p>
<div>options.xAxis={</div>
<div>labels:{</div>
<div>y:20, </div>
<div>style:{</div>
<div>color: '#7f8c8d',</div>
<div>font: '16px Arial'</div>
<div>}</div>
<div>},</div>
<div> </div>
<div>title:{</div>
<div>offset:50,</div>
<div> </div>
<div>style: {</div>
<div>color: '#333333',</div>
<div>font: '16px Arial',</div>
<div>fontWeight:'bold'</div>
<div>}</div>
<div> </div>
<div>}</div>
<div>} </div>
<div> </div>
<div>Regards</div>
<div>Kishore G</div>
<div> </div>

Find more posts tagged with

Comments

Matthew L.

<p>I believe the yAxis object is an array.</p>
<p>Try defining which yAxis to apply the code to by selecting the first one in the array <strong><span style="color:#ff0000;">[0]</span></strong></p>
<p>If that doesn't work, please post an example design so that we can determine the issue.</p>
<p> </p>
<p>options.yAxis<strong><span style="color:#ff0000;">[0]</span></strong>={<br>
labels:{<br>
y:20,<br>
style:{<br>
color: '#7f8c8d',<br>
font: '16px Arial'<br>
}<br>
},<br><br>
title:{<br>
offset:50,<br><br>
style: {<br>
color: '#333333',<br>
font: '16px Arial',<br>
fontWeight:'bold'<br>
}<br><br>
}<br>
}</p>

rajkishore

<p>thanks Matthew. It is working. I just want to check <strong>fontweight </strong>is not working. do you know what it is causing? I want to apply x,y axis title bold font.please let me know is there anything I am missing here.</p>

Matthew L.

<p>Try putting <span style="color:#ff0000;">"</span>bold<span style="color:#ff0000;">"</span> in double quotes:</p>
<p> </p>
<p> </p>
<p>options.yAxis[0]={</p>
<p> labels:{<br>
y:20,<br>
style:{<br>
color: '#7f8c8d',<br>
font: '16px Arial'<br>
}<br>
},<br>
title:{<br>
offset:50,<br>
style: {<br>
color: '#333333',<br>
font: '16px Arial',<br>
fontWeight: <span style="color:#ff0000;">"</span>bold<span style="color:#ff0000;">"</span></p>
<p> }<br>
}</p>
<p>}</p>

rajkishore

<p>No Luck Matthew.it is still not applying the bold font.</p>

Matthew L.

<p>I found the issue.</p>
<p>The command <span style="color:#ff0000;">font: '16px Arial', </span>is not valid and causes the code to break.</p>
<p>Using the following <span style="color:#008000;">fontFamily: 'Arial', fontSize: '16px'</span> corrects the issue.</p>
<p> </p>
<p>See full code below:</p>
<pre class="_prettyXprint">
beforeGeneration: function(options) {
options.yAxis[0]={
labels:{
y:20,
style:{
color: '#7f8c8d',
fontFamily: 'Arial',
fontSize: '16px',
fontWeight: 'bold'
}
},
title:{
offset:50,
style: {
color: '#333333',
fontFamily: 'Arial',
fontSize: '16px',
fontWeight: 'bold'
}
}
}
},
</pre>

rajkishore

<p>Thanks Matthew,</p>
<p> </p>
<p>1.Just want an improvement in both x and y axis we are using font-family as "Arial". instead of writing every where in the script can we set at one place font family so that it applies all the chart with same font.</p>
<p> </p>
<p> </p>
<p>2. can i set the same font value for series labels. Could you please share sample script.</p>
<p> </p>
<p> </p>
<p>Regards</p>
<p>Kishore G</p>

Matthew L.

<p>Here is my code sample with attached example that will loop through each series and apply font style and random color to the data label and associated bar/column.</p>
<pre class="_prettyXprint">
beforeGeneration: function(options) {

myFontFamily = "Arial"; //My Settings
myFontSize = "16px"; //My Settings

var randomColorArray = []; //Set array for random colors to be used in bars
for(i=0;i<options.series.length;i++){ //Loop through series
var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); //Generate random color. Source: http://www.paulirish.com/2009/random-hex-color-code-snippets/
randomColorArray.push(randomColor); //Add random color to array for bars

options.series[i]={ //Grab series in array
dataLabels:{
enabled: true, //Set dataLabels to true (visible)
color: randomColor, //Set color or dataLabel
style:{
fontFamily: myFontFamily, //Use my settings value
fontSize: myFontSize, //Use my settings value
fontWeight: 'bold'
}
}
}
}
options.colors = randomColorArray; //Set bar colors to array values

options.yAxis[0]={
labels:{
y:20,
style:{
color: '#7f8c8d',
fontFamily: myFontFamily, //Use my settings value
fontSize: myFontSize, //Use my settings value
fontWeight: 'bold'
}
},
title:{
offset:50,
style: {
color: '#333333',
fontFamily: myFontFamily, //Use my settings value
fontSize: myFontSize, //Use my settings value
fontWeight: 'bold'
}
}
}
},
</pre>

rajkishore

<p>Thank Mathew, It is working as expected.</p>
<p> </p>
<p> Continuing the further question i had.</p>
<p> </p>
<p>How can i set the hover values/tool tip's<strong> font and color</strong> across the all the bars?</p>

Matthew L.

<p>This can be done by using <a data-ipb='nomediaparse' href='http://api.highcharts.com/highcharts'>highcharts api</a> to adjust the tooltip format.</p>
<p>Using the <a data-ipb='nomediaparse' href='http://api.highcharts.com/highcharts#tooltip.headerFormat'>headerFormat</a> and the <a data-ipb='nomediaparse' href='http://api.highcharts.com/highcharts#tooltip.pointFormat'>pointFormat</a> options we can modify the output tooltip tags for each series in the chart:</p>
<pre class="_prettyXprint _lang-js">
//tooltip labels
options.tooltip = {
borderColor: null,
headerFormat: '<div style="color:{series.color};fontFamily: ' + myFontFamily + ';font-size: ' + myFontSize + ';font-weight: 400;">{point.key}</div>',
pointFormat: '<div style=" font-size: 12px;font-weight: 600;margin-top: 4px;">{series.name}: {point.y}</div>'
};
</pre>
<p>Below is the full code used in the attached example:</p>
<pre class="_prettyXprint _lang-js">
beforeGeneration: function(options) {

myFontFamily = "Arial"; //My Settings
myFontSize = "16px"; //My Settings

var randomColorArray = []; //Set array for random colors to be used in bars
for(i=0;i<options.series.length;i++){ //Loop through series
var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); //Generate random color. Source: http://www.paulirish.com/2009/random-hex-color-code-snippets/
randomColorArray.push(randomColor); //Add random color to array for bars

options.series[i]={ //Grab series in array
dataLabels:{
enabled: true, //Set dataLabels to true (visible)
color: randomColor, //Set color or dataLabel
style:{
fontFamily: myFontFamily, //Use my settings value
fontSize: myFontSize, //Use my settings value
fontWeight: 'bold'
}
}
}
}
options.colors = randomColorArray; //Set bar colors to array values

//tooltip labels
options.tooltip = {
borderColor: null,
headerFormat: '<div style="color:{series.color};fontFamily: ' + myFontFamily + ';font-size: ' + myFontSize + ';font-weight: 400;">{point.key}</div>',
pointFormat: '<div style=" font-size: 12px;font-weight: 600;margin-top: 4px;">{series.name}: {point.y}</div>'
};

//x-axis labels
i=0;
options.xAxis = {
labels: {
rotation: -45,
formatter: function(){
if(i>=randomColorArray.length) {i=0;}
return '<span style="font-weight: bold; font-size: 16px; fill: ' + randomColorArray[i++] + ';">' + this.value + '</span>';
}
}
}

//y-axis labels
options.yAxis[0]={
labels:{
y:20,
style:{
color: '#7f8c8d',
fontFamily: myFontFamily, //Use my settings value
fontSize: myFontSize, //Use my settings value
fontWeight: 'bold'
}
},
title:{
offset:50,
style: {
color: '#333333',
fontFamily: myFontFamily, //Use my settings value
fontSize: myFontSize, //Use my settings value
fontWeight: 'bold'
}
}
}
},
</pre>