I am using highchart with jquery .I am able to show X-axis with label (Apple,pears)..But I want to show Y-axis without lable .In other words I want to show a straight line on Y-axis.
here is my code
http://jsfiddle.net/3sembmfo/118/
$(function () {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches']
},
yAxis: {
allowDecimals: false,
title: {
text: 'Fruit'
},
visible: false
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
});
This can, and should, be resolved by options:
yAxis.lineWidth - to enable the line
yAxis.title.text - to hide the title
yAxis.gridLineWidth - to disable horizontal lines,
yAxis.labels.enabled - to disable labels
Working demo: http://jsfiddle.net/BlackLabel/3sembmfo/122/
Snippet:
yAxis: {
allowDecimals: false,
title: {
text: null
},
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 1,
visible: true
},
Replace your y Axis code with this. http://jsfiddle.net/3sembmfo/119/. If you have any query let me know.
yAxis: {
allowDecimals: false,
labels:{
style: {
fontSize:'0px'
}
},
title: {
text: 'Fruit',
style: {
fontSize:'0px'
}
},
visible: true
},
You have to use Highcharts.SVGRenderer and add line using load event.
chart: {
type: 'column',
events: {
load: function() {
var ren = this.renderer;
ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
.attr({
'stroke-width': 1,
stroke: '#000'
})
.add();
}
}
},
Fiddle demo
$(function() {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function() {
var ren = this.renderer;
ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
.attr({
'stroke-width': 1,
stroke: '#000'
})
.add();
}
}
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches'],
},
yAxis: {
allowDecimals: false,
title: {
text: ''
},
labels: {
enabled: false
},
gridLineWidth: 0,
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
});
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/4.1.9/highcharts.js"></script>
<div id="container"></div>
Related
I have code from this post. I want to populate the chart on click of a button instead of initializing it and provide only 3 values e.g.22286,12286,9286 ( these values would be dynamic) and plot the chart with the same appearance (i.e. 3 colors chart) as of the snippet
Highcharts.chart('container', {
colors: ['#762232', '#EFCA32', '#007788'],
title: {
text: '',
},
chart: {
type: 'area',
backgroundColor: null,
// spacingRight: 5,
spacingTop: 5,
spacingBottom: 5,
style: {
fontFamily: 'Arial, sans-serif',
},
plotBorderWidth: 1,
plotBorderColor: '#ccc',
},
xAxis: {
gridZIndex: 4,
gridLineWidth: 1,
tickInterval: 1,
tickWidth: 0,
alignTicks: true,
gridLineColor: '#762232',
minPadding: 0,
maxPadding: 0,
title: {
text: 'Years Invested',
},
labels: {
enabled: true,
},
},
yAxis: {
gridLineWidth: 0,
opposite: true,
title: {
text: 'Hypothetical Value',
},
showFirstLabel: false,
showLastLabel: false,
tickPositioner: function() {
var prevTickPos = this.tickPositions,
tickPositions = [prevTickPos[0], prevTickPos[prevTickPos.length - 1]],
series = this.chart.series;
series.forEach(function(s) {
tickPositions.push(s.processedYData[s.processedYData.length - 1]);
});
tickPositions.sort(function(a, b) {
return a - b;
});
return tickPositions;
},
labels: {
enabled: true,
align: "right",
reserveSpace: true,
},
},
tooltip: {
enabled: !1,
},
plotOptions: {
area: {
pointStart: 0,
stacking: false,
lineColor: '#762232',
lineWidth: 1,
fillOpacity: 1,
dataLabels: {
crop: !1,
color: '#762232',
align: 'right',
y: 5,
},
marker: {
enabled: !1,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: !1,
},
},
},
},
},
series: [{
data: [4457, 13371, 22286]
}, {
data: [2457, 9371, 12286]
}, {
data: [1457, 5371, 9286]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<button>Populate Chart</button>
All you need to do is to create series with empty data array and use chart.update method to add data. Example:
var chart = Highcharts.chart('container', {
...,
series: [{
data: []
}, {
data: []
}, {
data: []
}]
});
document.getElementById('chartInit').addEventListener('click', function(){
chart.update({
series: [{
data: [4457, 13371, 22286]
}, {
data: [2457, 9371, 12286]
}, {
data: [1457, 5371, 9286]
}]
});
});
Live demo: https://jsfiddle.net/BlackLabel/8pL6hr3w/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update
I have one Highchart which is showing a Standard Deviation curve (Bell curve). I would like to plot a x axis vertical line when x=0.(see my current graph).
When I include the code to include the line the chart disappear, so I believe something I need to change, obviously :-).
Just as information the chart works perfectly without the "plotLines:" inside xAxis.
Could you help me with this?
See my Script
<script>
var data = <?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>;
var pointsInInterval = 5;
Highcharts.chart('container', {
chart: {
margin: [50, 0, 50, 50],
events: {
load: function () {
Highcharts.each(this.series[0].data, function (point, i) {
var labels = ['4σ', '3σ', '2σ', 'σ', 'μ', 'σ', '2σ', '3σ', '4σ'];
if (i % pointsInInterval === 0) {
point.update({
color: 'red',
dataLabels: {
enabled: true,
format: labels[Math.floor(i / pointsInInterval)],
overflow: 'none',
crop: false,
y: -2,
style: {
fontSize: '13px'
}
}
});
}
});
}
}
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 0
}]
],
yAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true
}],
series: [{
name: 'Bell curve asd',
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
pointsInInterval: pointsInInterval,
intervals: 4,
baseSeries: 1,
zIndex: -1,
marker: {
enabled: true
}
}, {
name: 'Data',
type: 'scatter',
data: data,
visible: false,
marker: {
radius: 1.5
}
}],
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}
});
</script>
Plot lines should be added as a property of an axis object:
xAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true,
plotLines: [{
color: '#FF0000',
width: 2,
value: 0
}]
}
]
Live demo: http://jsfiddle.net/BlackLabel/4xcno5v9/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotLines
I used the opposite attribute to move the xAxis to the right. How is it possible that the bars will also start on the right side?
Thanks!
Highcharts.chart('absoluteInterruptions', {
chart: {
type: 'bar',
rotate: -90
},
title: {
text: 'Absolute Interruptions'
},
xAxis: {
min: 0,
opposite: true,
categories: [
'Linie5007',
'Linie5007.ST405',
'Linie5007.ST406',
'Linie5007.ST407',
'Linie5007.ST408',
'Linie5007.ST409',
'Linie5007.ST410',
'Linie5007.ST411',
'Linie5007.ST412',
'Linie5007.ST413'
]
},
yAxis: {
legend: {
enabled: false
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
align: 'right',
name: 'Interruptions',
data: [19, 2, 2, 2, 1, 1, 1, 1, 1, 1],
dataLabels: {
enabled: true,
align: 'right',
color: '#000000'
}
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id='absoluteInterruptions'></div>
Found this from the documentation and managed to get it to work by setting
yAxis:{reversed:true}
By reversing the y-axis the bars go from right to left.
Highcharts.chart('absoluteInterruptions', {
chart: {
type: 'bar',
rotate: -90
},
title: {
text: 'Absolute Interruptions'
},
xAxis: {
min: 0,
opposite: true,
categories: [
'Linie5007',
'Linie5007.ST405',
'Linie5007.ST406',
'Linie5007.ST407',
'Linie5007.ST408',
'Linie5007.ST409',
'Linie5007.ST410',
'Linie5007.ST411',
'Linie5007.ST412',
'Linie5007.ST413'
]
},
yAxis: {
reversed: true,
legend: {
enabled: false
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
align: 'right',
name: 'Interruptions',
data: [19, 2, 2, 2, 1, 1, 1, 1, 1, 1],
dataLabels: {
enabled: true,
align: 'right',
color: '#000000'
}
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id='absoluteInterruptions'></div>
I have a page that uses send data (in the example below the number 2) from a div to a javascript function but it does not seem to be working correctly. The alert comes up as shown. Any ideas?
THE DIV LINE
<div id="containerbar" data-F1="2" style="min-width: 200; height: 400px; margin: 0 auto"></div>
THE JAVASCRIPT
<script>
$(function () {
var $bardata = $("#containerbar");
var valueF1 = parseInt($bardata.data('F1'));
alert("Val1: " + valueF1);
$bardata.highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Teacher count per slider'
},
xAxis: {
categories: ['Feedback', 'Challenge & differentiation', 'Classroom talk', 'Skills development', 'Expectations & relationships'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' xx'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: '1st quartile',
data: [valueF1 , 4, 1, 0, 0]
}, {
name: '2nd quartile',
data: [4, 4, 1, 0, 0]
},{
name: '3rd quartile',
data: [4, 4, 1, 0, 0]
}, {
name: '4th quartile',
data: [4, 4, 1, 0, 0]
}]
});
});
</script>
var valueF1 = parseInt($bardata.attr('data-F1'));
I am using Highcharts to create a chart:
http://dev.speechlink.co.uk/David/sixthiteration/home.php
When scaling however, it seems to chop part of the right side of the chart off...I'm not entirely sure why..?
Here is my code:
jQuery:
chart = new Highcharts.Chart({
chart: {
renderTo: 'summarycontainer',
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: 'No. Entries Submitted This Month',
style: {
fontSize: 10
}
},
xAxis: {
lineWidth: 1,
lineColor: '#999999',
title: {
text: 'x-axis'
}
},
yAxis: {
title: {
text: 'y-axis'
},
labels: {
y: 2
},
lineWidth: 1,
lineColor: '#999999',
gridLineWidth: 1,
gridLineColor: '#eaeaea',
startOnTick: false,
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
},
series: [{
type: 'scatter',
name: '',
data: [10, 20, 10, 20, 2, 3, 1, 9],
lineColor: '#f6a828',
color: '#418ed6'
}],
});
});
And in my HTML, I have a div container:
<div id = "summarycontainer" style="width: 250px; height: 250px"></div>
In code above you have:
data: [10, 20, 10, 20, 2, 3, 1, 9],
and in source of page thre is:
data: [10, 20, 10, 20, 2, 3, 1],
Maybe that you think the plot chops last dot?
edit:
Add: categories: ['', ''] to your xAxis :
xAxis: {
categories: ['', ''],
lineWidth: 1,
lineColor: '#999999',
title: {
text: 'x-axis'
}
},
In my opinion there is a bug in highcharts.
edit 2:
For formatting tooltip use (below is only example!):
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},