I have a high chart that has two sets of data. The numbers on the y-axis for the data are to far apart from each other. I saw a solution for this a while back while looking for something else and can not find it for the life of me. So at the risk of repeating a question, How do I make the 160 in the red close together like in the yellow circle.
If I were to spell it out it looks like this 1 6 0 and I need to to look like this 160. Does anyone know what value controls that?
As requested, here is my code:
$(function() {
$('container').highcharts({
chart: {
zoomType: 'xy',
width: 640
},
xAxis: [{
categories: ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
crosshair: true,
gridLineWidth: 1,
labels: {
style: {
fontSize: '15px'
}
}
}],
yAxis: [{ // Primary yAxis
gridLineWidth: 2,
tickInterval: 20,
fontWidth: 100,
title: {
text: '',
}
}, { // Secondary yAxis
tickInterval: 20,
title: {
text: 'Total Retrun %',
style: {
color: "#000000",
fontSize: '20px'
}
},
labels: {
format: '{value}',
style: {
color: "#000000",
fontSize: '20px'
}
}
}, ],
legend: {
layout: 'horizontal',
align: 'center',
x: 0,
verticalAlign: 'top',
y: 0,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
itemStyle: {
font: '15pt Helvetica',
},
},
series: [{
name: 'AirTransport',
type: 'column',
yAxis: 1,
data: [22.5, -1.9, -32.6, 22.3, 33.4, -6.1, 19.2, 50.7, 28.1, -8.6],
tooltip: {
valueSuffix: ''
},
pointWidth: 35,
color: "#b3b3b3"
}, {
marker: {
fillColor: '#FFFFFF',
lineWidth: 1,
lineColor: null
},
name: 'S&P 500',
type: 'line',
yAxis: 1,
data: [15.8, 5.5, -37.0, 26.5, 25.0, 2.1, 16.0, 32.4, 23.7],
color: "#000000"
}]
});
});
As both wergeld and Halvor Strand pointed out, you need to more clearly define the font attributes for your labels.
Here's a revised set of values for your y-axes:
yAxis: [{ // Primary yAxis
gridLineWidth: 2,
tickInterval: 20,
fontWidth: 100,
title: {
text: 'S&P value',
style: {
color: "#000000",
font: '20px Arial, sans-serif'
}
},
opposite: true,
labels: {
format: '{value}',
style: {
color: "#000000",
font: '20px Arial, sans-serif'
}
}
}, { // Secondary yAxis
tickInterval: 20,
title: {
text: 'Total Return %',
style: {
color: "#000000",
font: '20px Arial, sans-serif'
}
},
labels: {
format: '{value}',
style: {
color: "#000000",
font: '20px Arial, sans-serif'
}
}
}, ],
Note how I removed the fontSize attribute in favor of the font attribute. In my experiences, this is far more useful and versatile.
Here's the result from my changes:
I noticed and corrected a few other items in your code:
You had both of your series set to display on the same yAxis value. I made them distinct.
I added the attribute opposite: true to one of your y-axes so it would appear on the right (see the demo at http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo-dual-axes/).
Your declaration $('#container').highcharts({ was missing the # sign. This would prevent your chart from appearing in the <div> element with that ID.
Here's the revised fiddle: http://jsfiddle.net/brightmatrix/pLort0mj/
I hope this solves your problem and has been helpful for you!
Related
How can I change the particular text color in donut chart
Example: "10% Need Action", I need to change the 10% to red color.
I have included the text inside donutchart.
I am trying to change the color of the text as mentioned above.
Here is my code
$(function ()
{
$('#dc-target-fill-rates').highcharts({
chart: {
type: 'pie',
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: false
},
title: {
verticalAlign: 'middle',
floating: true,
text: "<span><b>10%</b><br/>Need Action</span>",
style: { color: '#60727d', fontSize: '15px', fontFamily: 'Avenir LT Std Light' },
x: 0,
y: -5
},
subtitle: {
//text: '3D donut in Highcharts'
},
tooltip: {
style: { fontFamily: 'Avenir LT Std Heavy' },
shadow: false,
useHTML: true,
backgroundColor: 'rgba(255, 255, 255, 0.85)',
borderColor: '#a9a9a9',
headerFormat: "",
pointFormat: '<span style="color: {point.color}">●</span><span style="color: {point.color}"> {point.name}</span> : <b>{point.percentage:.2f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
innerSize: '80%',
//depth: 45,
shadow: false,
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Need Action',
y: 5,
color: '#fc5d45'
}, {
name: 'At Risk',
y: 10,
color: '#ffd52f'
}, {
name: 'On Track',
y: 50,
color: '#5db567'
}]
}]
});
});
Change the fill for the class .highcharts-title tspan. Refer https://jsfiddle.net/hrv3tfzs/
Add this style to your CSS
.highcharts-title tspan {
fill: red;
}
As an alternative to what Pugazh suggested, you could do the following:
title: {
verticalAlign: 'middle',
floating: true,
text: "<span style='color: red; font: 15px Arial;'><b>10%</b><br/>Need Action</span>"
x: 0,
y: -5,
useHTML: true
},
If you use the useHTML attribute, you can add simple markup to your title text. The Highcharts span tags are notorious for swapping out values when the chart is rendered as an SVG, which is why I added the styles as inline code vs. the style attribute in your original code.
Just be mindful of your quotes here and escape any additional single or double quotes you need to use.
I have a combo highchart but this is not rendered correctly, this the code that I am using:
<script type="text/javascript">
$(document).ready(function () {
SCurvechart = new Highcharts.Chart({
chart:
{
events: {
load: function () {
var label = this.renderer.label('Details for Company B')
.css({
width: '450px',
color: '#666666',
fontSize: '16px'
})
.attr({
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'left',
x: 50,
verticalAlign: 'top',
y: 5
}), null, 'spacingBox');
}
},
borderColor: '#BBBBBB',
borderWidth: 1,
plotShadow: true,
renderTo: 'SCurvechart_container',
zoomType: 'xy'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend:
{
align: 'left',
backgroundColor: '#FFFFFF',
floating: true,
layout: 'vertical',
verticalAlign: 'top',
x: 120,
y: 100,
itemStyle: {
color: '#666666',
fontWeight: 'bold',
fontSize: '10px',
font: 'Trebuchet MS, Verdana, sans-serif'
}
},
title:
{
text: ''
},
tooltip:
{
shared: true
},
plotOptions: {
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
events: {
//click: ChartClick
},
showInLegend: false,
stacking: 'normal'
}
},
xAxis:
{
labels:
{
formatter: function () { return this.value; }, style: { color: '#4572A7' },
style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
},
categories: ['25/07/14','29/08/14','26/09/14','31/10/14','28/11/14','26/12/14','30/01/15','27/02/15','27/03/15','24/04/15','29/05/15','26/06/15','31/07/15','28/08/15','25/09/15','30/10/15','27/11/15','25/12/15','29/01/16','26/02/16','25/03/16','29/04/16','27/05/16','24/06/16','29/07/16','26/08/16','30/09/16','28/10/16','25/11/16','30/12/16','27/01/17','24/02/17','31/03/17','28/04/17','26/05/17','30/06/17']
},
yAxis: [
{
min: 0,
labels:
{
formatter: function () { return this.value; }, style: { color: '#4572A7' },
style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
},
opposite: true,
title:
{
style:
{
font: '10px Trebuchet MS, Verdana, sans-serif'
},
text: 'Overall Activities'
}
},
{
labels:
{
formatter: function () { return this.value; }, style: { color: '#89A54E' },
style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
},
title:
{
style:
{
font: '10px Trebuchet MS, Verdana, sans-serif'
},
text: 'Weekly Activities'
}
}],
series: [
{ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,7,3,5,4,1,2,0,0,0,0,0,1,0,1,0,4,0,0,0], name: 'Target', type: 'column', yAxis: 1, color: '#6699CC' },
{ data: [], name: 'Actual', type: 'column', yAxis: 1, color: '#FAC090' },
{ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,,,,,,,,,,,,,,,,,], name: 'Actual Acc', type: 'spline', color: '#FF0000' },
{ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,5,12,15,20,24,25,27,27,27,27,27,27,28,28,29,29,33,,,], name: 'Target Acc', type: 'spline', color: '#376092' }
]
});
});
If you see the compare the chart against the one created in Excel you can see the issue,
https://www.dropbox.com/s/8lrk0vtgwitbdb4/Chart-Screenshot-in-Excel.JPG?dl=0
with the highchart rendered chart:
https://www.dropbox.com/s/c1ga0x3vxa8sbol/Highchart-screenshot.JPG?dl=0
As you can see the line charts are wrong they should be close to each other.
Any help is appreciated.
The problem is that the code setting up the highchart has enabled stacking by setting stacking attribute to 'normal'.
{..., plotOptions: { series: {..., showInLegend: false, stacking: 'normal'}}, ...}
You can disable stacking by removing the stacking attribute. For example...
{..., plotOptions: { series: {..., showInLegend: false}}, ...}
Or you can disable stacking by setting stacking attribute to null. For example...
{..., plotOptions: { series: {..., showInLegend: false, stacking: null}}, ...}
I need to draw a line graph, but just a line graph with no axes, values, etc. Only the graph and percentage at the end.
Q: how to remove all the items from the graph, indicate the axes, axes, etc. you only need to leave a line graph and interest.
$('#audience').jqChart({
legend: { visible: false },
border: { visible: false },
title:
{
text: 'Chart Title',
font: '12px sans-serif',
lineWidth: 1,
// strokeStyle: 'black',
fillStyle: 'white'
},
animation: { duration: 1 },
series: [
{
pointWidth: 0.2,
type: 'bar',
fillStyle: '#7fbbe5',
data: [['A', 33]],
labels: {
stringFormat: ' %s %%',
valueType: 'dataValue',
font: '11px sans-serif',
fillStyle: 'white'
},
tickOptions: {
showGridline: false
}
},
{
pointWidth: 0.2,
type: 'bar',
fillStyle: '#92b5c7',
data: [['A', 67]],
tickOptions: {
showGridline: false
},
labels: {
stringFormat: ' %s %%',
valueType: 'dataValue',
font: '11px sans-serif',
fillStyle: 'white'
}
}
]
});
I have an image, where I show, what I have, And what I need:
http://i57.tinypic.com/2h3x3yx.jpg
You can splice the jqChart Axes -
var axes = $('#jqChartDiv').jqChart('option', 'axes');
//remove all series
axes.splice(0, axes.length );
I have a graph with a rectangle added via chart.renderer and it looks exactly the way I want it to in Firefox, but when I view it in Chrome or IE the coordinates are off. I have the min and max set and I've tried setInterval, but to no avail. Here's my code:
$('#ao_vs_ppv').highcharts({
chart: {
renderTo: 'ao_vs_ppv',
type: 'scatter',
height:600,
width:600
},
title: {
text: 'Air Overpressure Vs. Peak Particle Velocity'
},
xAxis: {
min: .01,
max: 10,
type: 'logarithmic',
minorTickInterval:0.1,
title: {
text: "Peak Particle Velocity (in/sec)"
},
labels: {
overflow: 'justify'
},
tickmarkPlacement: 'on',
gridLineWidth: 1,
plotBands: [{
color: '#F7FE2E',
from: .4,
to: 10
},{
color: '#F7FE2E',
from: 1,
to: 10
}]
},
yAxis: {
min: 90,
max: 150,
title: {
text: 'Air Overpressure (dBL)'
},
tickInterval:10,
labels: {
overflow: 'justify'
},
plotBands: [{
color: '#F7FE2E',
from: 120,
to: 150
}]
},
plotOptions: {
scatter: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'AO: {point.y}dBL<br>PPV: {point.x}in/sec'
}
}
},
legend: {
layout: 'horizontal',
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
series:formatHighChartsScatter(data[i]['x_data'],data[i]['y_data'], seismoNames)
}, function(chart) { // on complete
chart.renderer.rect(348, 50, 242, 217, 0)
.attr({
fill: 'red'
})
.add();
});
Here's what it looks like in Firefox: http://i.imgur.com/8OQfRCR.png
And here's what it looks like in Chrome: http://i.imgur.com/NpKjwu3.png
I believe I've found the solution. It has to do with the chart offsets chart.plotLeft and chart.plotTop. I will post my full solution later.
Here's my working code:
$('#ao_vs_ppv').highcharts({
chart: {
renderTo: 'ao_vs_ppv',
type: 'scatter',
height:600,
width:600
},
title: {
text: 'Air Overpressure Vs. Peak Particle Velocity'
},
xAxis: {
min: .01,
max: 10,
type: 'logarithmic',
minorTickInterval:0.1,
title: {
text: "Peak Particle Velocity (in/sec)"
},
labels: {
overflow: 'justify'
},
gridLineWidth: 1,
plotBands: [{
color: '#F7FE2E',
from: .4,
to: 10
},{
color: '#F7FE2E',
from: 1,
to: 10
}]
},
yAxis: {
min: 90,
max: 150,
title: {
text: 'Air Overpressure (dBL)'
},
tickInterval:10,
labels: {
overflow: 'justify'
},
plotBands: [{
color: '#F7FE2E',
from: 120,
to: 150
}]
},
plotOptions: {
scatter: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'AO: {point.y}dBL<br>PPV: {point.x}in/sec'
}
}
},
legend: {
layout: 'horizontal',
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
series:formatHighChartsScatter(data[i]['x_data'],data[i]['y_data'], seismoNames)
}, function(chart)
{ // on complete
//calculate corrdinates and dimensions based on offsets
var x=279+chart.plotLeft;
var y=chart.plotTop;
var width=chart.plotWidth*.467;
var height=chart.plotHeight*.502;
chart.renderer.rect(x, y, width, height, 0)
.attr({
fill: 'red'
})
.add();
});
I'm currently working on a web project for showing traffic usage in chart mode, and I'm using Highchart Bar for this project.
The problem is, when I run this code it doesn't give error at all
<script type="text/javascript">
$(function () {
$('#chart1').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'Sum of User'
},
xAxis: {
categories: [
'A','B','C','D', ],
labels: {
rotation: -20,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'User Values: '+ Highcharts.numberFormat(this.y, 1);
}
},
series: [{
name: 'sum',
data: [
3,5,1,1, ],
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'center',
x: 0,
y: 17,
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
</script>
But when I'm increasing the data categories into A, B, C, D, E, F, and G with each categories values respectively: 2,1,1,17,1,43,6,5, the script doesn't show any graph at all. Any ideas?
I dont think anything is wrong.
$(function () {
$('#chart1').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'Sum of User'
},
xAxis: {
categories: [
'A','B','C','D','E','F','G' ],
labels: {
rotation: -20,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'User Values: '+ Highcharts.numberFormat(this.y, 1);
}
},
series: [{
name: 'sum',
data: [
2,1,1,17,1,43,6, ],
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'center',
x: 0,
y: 17,
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
test the fiddle
let me know your comments.
Please start with small data...
Like first try to display A,B,C ..
then A,B,C,D ..if success then add one more E..
Do small steps then check at which point that graph does not show..
On this way may solve you problem.