Here is a sample fiddle (1) that shows the series name along the line body
(Sessions, Users). How do I make similar label for a highstock chart?
(The label seems to be appearing due to the data module that does the csv processing)
(1) https://jsfiddle.net/4restw8a/9/
Highcharts.chart('container', {
chart: {
scrollablePlotArea: {
minWidth: 700
}
},
data: {
csvURL: 'https://cdn.rawgit.com/highcharts/highcharts/' +
'057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/analytics.csv',
beforeParse: function (csv) {
return csv.replace(/\n\n/g, '\n');
}
},
title: {
text: 'Daily sessions at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' sessions',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All sessions',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New users'
}]
});
This comes from the series label module, which you can use by including series-label.js:
<script src="https://code.highcharts.com/modules/series-label.js"></script>
See this JSFiddle example of a Highstock chart with it included.
See this API documentation for its settings.
Related
I whant to have tooltip at mouseposition, not only at "real" data (so not getting the series data, but the calculated data).
How to do this?
(the real data is different, not a straight line like in the fiddle)
Highcharts.stockChart('container', {
xAxis: {
type: 'datetime',
startOnTick: false,
endOnTick: false,
tickInterval: 360 * 24 * 3600 * 1000,
crosshair: {
snap: true,
},
},
tooltip: {
split: false,
shared: true,
},
legend: {
enabled: true,
layout: 'proximate',
align: 'right',
itemStyle: {
color: '#000000',
fontWeight: 'bold',
fontSize: '10px',
}
},
series: [{
name: 'Line1',
data: [{
x: (new Date("2000-05-12")).getTime(),
y: 0
},
{
x: (new Date("2050-05-12")).getTime(),
y: 100
},
]
},
{
name: 'Line2',
data: [{
x: (new Date("2000-05-12")).getTime(),
y: 100
},
{
x: (new Date("2050-05-12")).getTime(),
y: 0
},
]
}
]
});
https://jsfiddle.net/nowo/09br3g6m/7/
You need to have points that crosshair can refer to like on the example.
To edit the options you want to show, you have the option of using xAxis.labels.formatter.
xAxis: {
crosshair: {
labels: {
enabled: true,
shape: 'rect',
//format:'{value:%d%y}',
backgroundColor: 'rgb(255,0,0)',
formatter: function(value) {
return 'label: ' + value;
}
},
}
},
yAxis: {
opposite: true,
crosshair: {
label: {
enabled: true,
//format: '{value:.2f}',
shape: 'rect',
padding: 2,
formatter: function(number) {
console.log('here is the numer', number);
return 'test ' + number;
}
}
},
labels: {
align: 'left',
format: '{value:.2f}',
y: 6,
x: 2
}
},
Live demo: https://jsfiddle.net/BlackLabel/8cdyh253/1/
I'm newbie to highchart and I've got a demo for polar chart using highcharts
Highcharts.chart('container', {
chart: {
polar: true,
type: 'area'
},
accessibility: {
description: 'ASDFR'
},
title: {
text: '',
x: -120
},
pane: {
size: '100%',
startAngle:-42
},
xAxis: {
categories: ['ATT', 'TEC', 'TAC', 'DEF', 'CRE'],
tickmarkPlacement: 'on',
lineWidth: 0,
labels:{
formatter: function(){
return this.value + '???'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name} <b>{point.y:,.0f}</b></span>'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
series: [{
name: '',
data: [73, 80, 80, 54, 92],
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
pane: {
size: '70%'
}
}
}]
}
});
How can I show the value of the series right in the xAxis label e.g ATT 73, TEC 80, TAC 80...
You can get the associated value through series data. Example:
xAxis: {
...,
labels: {
formatter: function() {
return this.value + ' ' + this.chart.series[0].yData[this.pos];
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/pyohzk8c/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
A smoother line is needed (the line should rise smoothly and evenly), but the values should not change. Is it possible to build a more straight line without changing the values?
Screen with explanations: http://prntscr.com/qudf96
And my code:
<script>
function reDrawCalc(gdata, gcurr, nums = 2) {
Highcharts.chart('container', {
chart: {
height: 400,
type: 'area',
margin: [20, 0, 20, 0]
},
title: {
text: null
},
subtitle: {
text: null
},
exporting: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
categories: ['One', 'Two', 'Three', 'Four', 'Five']
},
yAxis: {
gridLineWidth: 0,
},
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
inside: false,
style: {
fontFamily: 'Rubik, sans-serif',
textTransform: 'uppercase',
fontSize: 'none',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<div class="chitem-time">'+ this.x+'</div>'
+'<div class="chitem-val">'+ Highcharts.numberFormat(this.y,nums)+'<sup>'+gcurr+'</sup></div>';
}
}
}
},
series: [{
type: 'areaspline',
data: gdata,
lineWidth: 5,
color: '#f0c997',
fillColor:'transparent'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 350,
type: 'area',
margin: [20, 0, 20, 0]
},
series: [{
type: 'areaspline',
data: gdata,
lineWidth: 3,
color: '#f0c997',
fillColor:'transparent'
}],
}
}]
}
});
}
</script>
Is it possible to do it? And how to modify my code for it?
Thank you very much in advance!
As I mentioned in the comment current line shape is at it is because of the points positions on the chart. If you don't need to keep points actual positions the solution which you can use is to use the dummy data for the points and use the correct one in the dataLabels. See:
Demo: https://jsfiddle.net/BlackLabel/fshx3n50/
data: [{
y: 5,
z: 0.20
}, {
y: 10,
z: 1.40
}, {
y: 18,
z: 6.20
}, {
y: 30,
z: 18.00
}, {
y: 50,
z: 73.00
}],
I also changed the formatter function to display the z value in dataLabel:
formatter: function() {
return '<div class="chitem-time">' + this.x + '</div>' +
'<div class="chitem-val">' + Highcharts.numberFormat(this.point.z) + '<sup>REM</sup></div>';
}
Im trying to create plotbands but does not work correctly.
Here is my fiddle and code.
https://jsfiddle.net/z0h85fku/
Javascript
$(function() {
categories = ["09/07/2016 00:00", "09/07/2016 00:01", "09/07/2016 00:02", "09/07/2016 00:03", "09/07/2016 00:04"]
rate_1 = [0.8, 0.54, 0.6, 0.3, 0.4]
rate_2 = [0.33, 0.16, 0.33, 0.3, 0.38]
rate_3 = [0.03, 0.04, 0.05, 0.03, 0.01]
var addCallout = function(chart) {
$('.callout').remove();
var xAxis = chart.xAxis[0],
yAxis = chart.yAxis[0],
series = chart.series[0],
point = series.data[0];
console.log('xAxis == ', xAxis)
console.log('yAxis == ', yAxis.toPixels)
console.log('series == ', series)
console.log('point == ', point)
console.log(point.plotY)
console.log(point.plotX)
var a = chart.renderer.label('<div class="callout top">This is the callout text!</div>', point.plotX + chart.plotLeft - 20,
point.plotY + chart.plotTop - 70, 'callout', null, null, true).add();
};
$('#container').highcharts({
chart: {
// type: 'bar',
events: {
load: function() {
addCallout(this);
},
redraw: function() {
addCallout(this);
},
}
},
title: {
text: 'Spikes Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
events: {
load: function() {
// addCallout(this);
},
redraw: function() {
addCallout(this);
},
},
series: [{
turboThreshold: 2000 // to accept point object configuration
}],
xAxis: {
categories: categories,
<!-- tickInterval: 60,-->
plotBands: [{
color: 'orange', // Color value
// from: Date.UTC(09/07/2016 02:00), // Start of the plot band
// Date.UTC(year,month,day,hours,minutes,seconds,millisec)
from: Date.UTC(2016,9,7,0,0),
to: Date.UTC(2016,9,7,4,0)
// to: '09/07/2016 05:00' // End of the plot band
}],
type:'datetime'
},
yAxis: {
title: {
text: 'Error Rate'
},
min: 0,
max: 5,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
labels: {
format: '{value} %'
}
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [
// {turboThreshold: 2000 },
{
name: 'Rate-1',
data: rate_1,
turboThreshold: 2000,
lineWidth: 1,
dataLabels: {
enabled: true,
useHTML: true,
style: {
fontWeight: 'bold'
},
},
}, {
name: 'Rate-2',
data: rate_2,
turboThreshold: 2000,
lineWidth: 1
}, {
name: 'Rate-3',
data: rate_3,
turboThreshold: 2000,
lineWidth: 1
}
]
});
});
I have a chart with to series of data for a bunch of categories, every category only have values for one of the series:
The problem is that the bars don't start in the center of the category but on the begin or end, depending if its in first or the second series.
Is there a way to start the bar in center?
Example: http://jsfiddle.net/ms1kfrox/
Chart settings:
{
chart: {
type: 'bar'
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
padding: 0,
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Type1',
data: [null, {
y: 870
},
null, {
y: 408
},
null
]
}, {
name: 'Type2',
data: [{
y: 973
},
null, {
y: 680
},
null, {
y: 34
}
]
}]
}
You can set grouping:false in plotOptions / bar object.
Example: http://jsfiddle.net/ms1kfrox/1/