I'm working with some small size charts in Highcharts, and it seems that due to the size Highcharts is showing labels for only alternating ticks on the x-axis. What I'd like to do to show the label for every tick on the x-axis, even if it means using a smaller font. I haven't been able to figure out how to do this.
I'm loading csv data from a pre HTML block.
Here's the code:
<body>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script> <div id="container"></div>
</body>
<div id="chart_left_1" style="min-width: 200px; max-width: 350px; height: 200px;"></div>
<pre id="gdpgr" style="display:none">year,gdp_yoy,us_gdp_yoy,
2009,1.9000,-2.1000,
2010,7.6000,3.8000,
2011,6.0000,3.7000,
2012,0.9000,4.1000,
2013,-0.1000,3.2000,
2014,5.8000,4.1000,
</pre>
$(function () {
$('#chart_left_1').highcharts({
chart: {
borderColor: '#000080',
borderRadius: 0,
borderWidth: 2
},
title: {text: 'GDP Growth', margin: 0},
exporting: {enabled: false},
legend: {enabled: false},
subtitle: {text: null},
xAxis: {
},
yAxis: {
tickInterval: 2,
title: {text: null},
labels: {
formatter: function() {
return this.value + '%';
}
},
},
tooltip: {
enabled: true,
valueSuffix: '%'
},
data: {
csv: document.getElementById('gdpgr').innerHTML,
startRow: 1,
endRow: 11,
endColumn: 2,
firstRowAsNames: false
},
xAxis: {
allowDecimals: false
},
series: [{
type: 'column',
name: ' GDP growth',
color: '#000080'
},{
type: 'column',
name: 'US GDP Growth',
color: '#CCCCCC'
}]
});
});
And Here's a jsFiddle: https://jsfiddle.net/otfq0dch/1/
In this case, if you dont need to use other type of xAxis than category, you can use step label's property.
xAxis: {
type: 'category',
allowDecimals: false,
labels: {
step: 1
}
},
Example: https://jsfiddle.net/otfq0dch/3/
http://api.highcharts.com/highcharts/xAxis.labels.step
the xAxis is defined twice, i consolidate and added a new option called tickInterval which is set to 1
https://jsfiddle.net/otfq0dch/2/
xAxis: {
allowDecimals: false,
tickInterval: 1
},
link to the docs: http://api.highcharts.com/highcharts/xAxis.tickInterval
xAxis: {
type: 'category',
allowDecimals: true,
labels: {
step: 1
}
},
Related
I want to create barchart having custom horizontal lines added to show average benchmarks. Also there is labels added on these lines to show benchmark heading. I get line labels cut off as shown in following image.
Barchart
Also if plot line value is beyond the range plotted, plot line get hidden. How to handle this case in highchart? Following is the code that I am using.
$(function () {
$('#chartContainer').highcharts({
credits: {
enabled: false
},
colors: ['#3C791D','#BEBEBE','#7F7F7F'],
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['Great', 'Neutral', 'Bad']
},
yAxis: {
title: {
text: ''
},
plotLines:[{
value:80,
color: '#000000',
width:2,
zIndex:4,
label:{
text:'XYZ Average: 80%',
align: 'right'
}
},{
value:60,
color: '#000000',
width:2,
zIndex:4,
label:{
text:'PQR Average: 60%',
align: 'right'
}
}]
},
legend: {
enabled : false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter:function() {
return this.y + '%';
}
},
colorByPoint: true,
enableMouseTracking: false
}
},
series: [{
type: 'column',
name: "s",
data: [70, 10, 40]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<html>
<body>
<div id="chartContainer"></div>
</body>
</html>
Set height for the chart and also the max value for Y-axis
chart: {
height: 600
},
yAxis: {
min: 0,
max: 100
}
I am having troubles duplicating some highcharts in a php file. I separate each highchart in its own .js file. Everything works just fine if I stick to just one chart. As soon as I try to include several of the same chart, then only the first one shows up.
Below is the first highcharts .js file:
$(function () {
$('#chart2').highcharts({
chart: {
zoomType: 'xy',
marginTop: 40,
marginBottom: 75
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: [{
categories: []
}],
yAxis: [{ // Primary yAxis
tickAmount: 11,
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
gridLineWidth: '0',
labels: {
format : '{value}%',
},
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
align: 'center',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: '',
type: 'column',
yAxis: 0,
tooltip: {
valueSuffix: ''
},
}, {
name: '',
type: 'line',
yAxis: 1,
tooltip: {
valueSuffix: '%'
}
}]
},
function(theChart){
var tableName = '<?php echo $tableName; ?>';
$.getJSON("Data.php", {id: escape(tableName)}, function(json) {
theChart.xAxis[0].setCategories(json[0]['data']);
theChart.series[0].setData(json[4]['data'], true);
theChart.series[1].setData(json[3]['data'], true);
});
});
var theChart = $('#chart2').highcharts();
chart = new Highcharts.Chart(options);
});
Below is the second highcharts .js file. Note that they are exactly the same. The only thing that is changed is the variable names (I dont know what else to do). As I said before - both work just fine apart. But when I include both in my .php file, then only the first will show up.
$(function () {
$('#chart3').highcharts({
chart: {
zoomType: 'xy',
marginTop: 40,
marginBottom: 75
},
title: {
text: 'EBITDA and EBITDA-margin'
},
subtitle: {
text: ''
},
xAxis: [{
categories: []
}],
yAxis: [{ // Primary yAxis
tickAmount: 11,
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
gridLineWidth: '0',
labels: {
format : '{value}%',
},
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
align: 'center',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: '',
type: 'column',
yAxis: 0,
tooltip: {
valueSuffix: ''
},
}, {
name: '',
type: 'line',
yAxis: 1,
tooltip: {
valueSuffix: '%'
}
}]
},
function(theChart1){
var tableName1 = '<?php echo $tableName; ?>';
$.getJSON("Data.php", {id: escape(tableName1)}, function(json) {
theChart1.xAxis[0].setCategories(json[0]['data']);
theChart1.series[0].setData(json[4]['data'], true);
theChart1.series[1].setData(json[3]['data'], true);
});
});
var theChart1 = $('#chart3').highcharts();
});
You will notice that I call the first chart 'chart2' and the second one 'chart3'. I think the problem is very strange since I only get this problem on this exact chart type (dual-axis column+line). The way I include the files in the .php file is by using php include in head part. I then call them in the body part by using div.
<head>
<script type="text/javascript">
<?php
include('../index/charts2.js');
include('../index/charts3.js');
?>
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="chart2"></div>
</td>
<td>
<div id="chart3"></div>
</td>
</tr>
</table>
</body>
I hope somebody here will be able to help. Let me know if you need anything further to find out about this.
i think this can help you, look at this example http://jsfiddle.net/engemasa/7cvCX/
it was taken from here how do I get two highcharts on one page?
(all credit to the one that posted it)
no code nesesary, look at the fiddle, its self explanatory.
also, the console once you execute everything show some error?
also, are you shure that its just one that is showed?, is there a chance that the both charts are executed one on top of the other?
I have a Highchart in my web application. In the browser it displays normally which is as follows:
But when I export the chart it flips the axis and I end up with the following image:
Following are the options I am using for my Highchart.
var options = ({
chart: {
renderTo: 'chartDiv'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7200 * 10000,
allowDecimals:false,
labels: {
format: '{value}',
rotation: 30,
align: 'left',
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'No. of rings'
},
min: 0
},
{ // Secondary yAxis
gridLineWidth: 0,
min: 0,
title: {
text: 'Accumulative Rings',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} Ring',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
}
],
tooltip: {
shared: true
},
legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
plotOptions: {
spline: {
marker: {
enabled: false
},
}
}
});
I have three series in my chart, the bar chart can have 0 values.
The data is coming from an ajax service, which I put in an array and then add to chart as follows:
chart.addSeries({
type: 'bar',
name: 'Rings per day ',
data: barData,
pointInterval: mainInterval
});
chart.addSeries({
type: 'spline',
name: 'Accumilative rings ',
data: spline1Data,
yAxis: 1,
});
chart.addSeries({
type: 'spline',
name: 'Planned Progress ',
data: spline2Data,
yAxis: 1,
color: "#FF0000"
});
What's wrong with my chart?
bar series is the key part. bar series forces chart to be rendered flipped. In your case use column. It displays differently on your browser because, most probably, you have an old version of Highcharts.
I am working on an application which users can switch the chart type from Spider web chart to Column Chart or Vice Versa. But As you can see from the code snippet when I change the Spider Web Type to column and disable the polar property the first column of the chart sticks to Y axis and so on with the last column as show in the image:
$(function () {
$('#container').highcharts({
chart: {
// polar: true,
type: 'column'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
I already tried to fix this by adding offset to Y axis
yAxis: {
lineWidth: 1,
offset: 70,
title: {
text: 'Primary Axis'
},
But it didn't do the job! can you please take a look at demo and let me know how I have to deal with this?
The problem is caused by pointPlacement in the series:
pointPlacement: 'on'
If you remove this, the chart renders as you want.
I'm stuck at MACD plotting in highchart.
I don't understand where I'm doing wrong. Please follow jsfiddle link and try to solve and plotting graph for MACD only.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: [{ // Primary yAxis for volume
title: {
text: 'volume',
style: {
color: 'blue'
}
},
height: '60%',
},{ // Secondary yAxis for Return
height: '60%',
opposite: true
},{
labels: {
align: 'left',
x: -3
},
title: {
text: 'MACD'
},
top: '65%',
height: '35%',
opposite: true
}],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [ { color: "blue",
data: [0.06694678963061322,0.22184874961635637,1,1.031408464251624,0.6989700043360187,1e-7,0.47712125471966244,1e-7,0.17609125905568124,0.6989700043360187,1e-7,1e-7,1e-7,0.47712125471966244,1e-7,0.47712125471966244,0.0791812460476248],
id: "left_bar",
name: "Sentiment",
type: "column",
},{
color: "#F09413",
data: [50,49.805,50.024142,51.9900907806,54.0333013483,56.1568100913,58.3637727279,60.5991052233,62.7140139956,65.2100317526,68.5422643752,72.0447740848,75.7262620405,80.3758545298,85.3109319979,89.457043293,3.9835696837],
id: "right_bar",
name: "Price",
type: "line",
yAxis: 1
},{
algorithm: "MACD",
linkedTo: "right_bar",
name: "MACD",
showInLegend: true,
type: "trendline",
yAxis: 1
}
]
});
});
Accoring to the code: https://rawgit.com/laff/technical-indicators/master/technical-indicators.src.js it looks like periods are hardcoded, so it is a reason why your macd is not calculated. You you no enough points.