I am using a simple linechart.
See this example: http://jsfiddle.net/w0do5vus/5/
I want to display just a partial width of the series(including the markers).
How can I achieve this? For the line I manage to hide it, but the markers are still visible.
Thanks in advance.
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
var chart = $('#container').highcharts();
chart.clipRect.attr({
width: 200
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 300px"></div>
Related
I am looking for the options to add a hyperlink to the stock chart. So that a user can click anywhere on the chart and redirect to another page.
Not on the series, I would like to add hyperlink on the chart itself.
You need to call function on your highchart container div.You can use following function.
$("#container").on("click", function(){
window.open('http://google.com', '_blank');
// You can also use if not cross domain request
//window.location.href='http://google.com';
});
Refer this fiddle link for example
Simply make your rendering element an <a> element with a href attribute pointing to where you wish to take users (just like any other hyperlink). Just make sure that this <a> element has a display property set as block:
$(function () {
Highcharts.chart('container', {
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
#container {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Note that for this example I've used Highcharts' own Basic Line Chart demo.
I have a line chart like this:
http://jsfiddle.net/vbLdsodu/
How do i remove or hide the line after july? I want the date axis to continue but don't show the line where the values is 0.
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 0, 0, 0, 0, 0]
}]
});
});
You can replace 0 with null in the data which will then keep the axis listing the months, but stop the line from drawing.
It's also possible to do this part way through the graph and the line will draw from the next data point.
I'm new to Highcharts and I need help creating a graph that looks like the one displayed in the picture below.
Really would appreciate the help on this.
Use gridLineWidth to set the width of the grid: gridLineWidth: 2,
Be sure to set the gridZIndex to a higher number to get it over the series: gridZIndex: 4.
To reduce the columns' space use poitPadding and groupPaddingenter code here under plotOptions.
pointPadding: 0,
groupPadding:0,
Check the example (jsfiddle)
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: '#000000',
plotBackgroundColor: '#808080'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
gridLineWidth: 2,
gridZIndex: 4,
gridLineColor:'#000000'
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
gridLineWidth: 2,
gridZIndex: 4,
gridLineColor:'#000000'
},
plotOptions: {
series: {
pointPadding: 0,
groupPadding:0,
borderColor:'#808080',
}
},
series: [{
name: 'Tokyo',
color:'#D2691E',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
I have a serie name with special character that I cannot change. How I can show it? I tried legend: { useHMTL: true }, but it's not working.
My code is here:
$(function () {
$('#container').highcharts({
title: {
useHTML: true,
text: 'Monthly Average Temperature'
},
subtitle: {
useHTML: true,
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
title: {
text: 'City<br/><span style="font-size: 9px; color: #666; font-weight: normal">(Click to hide)</span>',
},
layout: 'vertical',
x: -10,
y: 100
},
series: [{
name: '<Tokyo>',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
http://jsfiddle.net/4x6susks/
It isn't working to <Tokio> legend
Replace in name: < with <. Otherwise legend will use that name as tag (like <span> or <div>). See demo: http://jsfiddle.net/4x6susks/3/
as i am trying with above displayed code, but unable to get data values over bar chart
i want data values to be displayed over bars. when i tried it by adding datalabels value get displayed in the bar not on the bar .please help in this regard.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9]
}, {
name: 'New York',
data: [83.6]
}, {
name: 'London',
data: [48.9]
}, {
name: 'Berlin',
data: [42.4]
}]
});
});
Just set dataLabels: { enabled: true } under plotOptions. See: http://jsfiddle.net/3bQne/499/