I am trying to show my x-axis values as a string on highcharts for a series but instead get (0,1,2....) which is the xaxis array index position. How do I show the xaxis value formatted as a string on higcharts?
Here is what I have
Highcharts.chart('container', {
title: {
text: 'Chart with time'
},
xAxis: {
type: 'datetime',
"labels": {
"formatter": function() {
console.log(this);
console.log(this.value.toString());
return this.value
}
},
},
series: [{
data: [
['Jan-1', 100],
['Jan-2', 120],
['Jan-3', 130]
]
}]
});
Would like to see 'Jan-1', 'Jan-2' as the labels on the x-axis. Here is a link to the fiddle below https://jsfiddle.net/dLfv2sbd/2/
Remove labels and use type: 'category' instead of type: 'datetime':
Highcharts.chart('container', {
title: {
text: 'Chart with time'
},
xAxis: {
type: 'category',
},
series: [{
data: [
['Jan-1', 100],
['Jan-2', 120],
['Jan-3', 130]
]
}]
});
Check the fiddle.
You can still use datetime this way.
Highcharts.chart('container', {
title: {
text: 'Chart with time'
},
xAxis: {
type: 'datetime',
"labels": {
"formatter": function() {
return Highcharts.dateFormat('%b-%e', this.value)
}
},
},
series: [{
data: [
[Date.UTC(2017,0,1), 100],
[Date.UTC(2017,0,2), 120],
[Date.UTC(2017,0,3), 130]
]
}]
});
https://jsfiddle.net/dLfv2sbd/4/
Related
I am using highcharts to render a column chart and my legends as well. I want to be get the total count of all the legends together (default legend and linkedTo legend).
Ex:
in the fiddle below: I have 2 legends: now when I click on one of them, I want to see the cumulative count of all the series pertaining to that legend clicked.
http://jsfiddle.net/5eb0utxq/
is that possible, currently its getting some count, but im not sure if that is the total count of all the series related to that legend.
code:
$(function() {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
plotOptions: {
series: {
showInLegend: true,
}
},
legend: {
labelFormatter: function() {
var totalLegend = this.yData.reduce(function(pv, cv) { return pv + cv; }, 0);
return this.name +" : "+ totalLegend;
}
},
series: [{
data: [4740, 1378, 8],
name: "Confirmed",
id: "Confirmed",
type: "column",
y: "86",
stack: "ACTIVE"
}, {
data: [2932, 141],
name: "Potential", id: "Potential",
stack: "ACTIVE",type: "column",
y: "86"
}, {
data:[1752, 11],
linkedTo: "Confirmed",
name: "Confirmed",showInLegend: false,
type: "column",
y: "86",
stack: "REOPENED"
}, {
data: [1089, 2],
linkedTo: "Potential",showInLegend: false,
name: "Potential",
type: "column",
y: "86",
stack: "REOPENED"
}, {
data: [2332, 1960, 42],
linkedTo: "Potential",
name: "Potential",showInLegend: false,
type: "column",
y: "86",
stack: "NEW"
}, {
data: [480, 4684, 2258],
linkedTo: "Confirmed",
name: "Confirmed",showInLegend: false,
type: "column",
y: "86",
stack: "NEW",
}]
});
});
You need to count yData from all linked series, this is the main series, so you can use the below code:
legend: {
...,
labelFormatter: function() {
var totalLegend = 0;
[...this.linkedSeries, this].forEach(function(lSeries) {
lSeries.yData.forEach(el => {
totalLegend += el
});
});
return this.name + ' (' + totalLegend + ')';
}
}
Live demo: http://jsfiddle.net/BlackLabel/kfger78b/
API Reference: https://api.highcharts.com/highcharts/legend.labelFormatter
I have examples json data for Higcharts USD currency:
https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json
So i added simply one value to data, there not show in a chart.
[
[
1167609600000,
50,
30
],
[
1167609600001,
60,
40
],
[
1167609600002,
70,
50
]
]
My code:
function myFunction() { Highcharts.getJSON(
'http://192.168.0.157/log1.json', function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x', backgroundColor:"#e7ecea"
},
title: {
text: 'Pomiary'
},
subtitle: {
text: document.ontouchstart === undefined ?
'select' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'speed',
data: data
}, {
type: 'area',
name: 'speed2',
data: data
}]
}); } );
};
How i can add next series?
The simplest way is to use keys property:
series: [{
data: data
}, {
keys: ['x', 'someValue', 'y'],
data: data
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4797/
API Reference: https://api.highcharts.com/highcharts/series.line.keys
I cannot get my common datetime xAxis to visually line up across line and column charts. I want the crosshairs to move in lockstep.
Here are line and column charts with synchronized crosshairs to demonstrate:
https://jsfiddle.net/aadhoc331/9xodqw4u/
(Note: I'm actually using current version of Highstock, but the fiddle is a minimal example)
Obligatory code (go to fiddle instead):
$('<div class="chart">')
.appendTo('#container')
.highcharts({
title: {
text: 'Chart A',
},
chart: {
type: 'line'
},
xAxis: {
type: 'datetime',
crosshair: true,
},
yAxis: {
title: {
text: undefined
},
labels: {
enabled: false,
},
},
series: [
{
name: 'Line',
type: 'line',
data: [
[1072915200000, 8000],
[1104537600000, 9000],
[1136073600000, 10000],
[1167609600000, 11000],
[1199145600000, 12000],
[1230768000000, 13000],
[1262304000000, 14000],
[1293840000000, 15000],
]
}
]
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
title: {
text: 'Chart B',
},
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
crosshair: true,
},
yAxis: {
title: {
text: undefined
},
labels: {
enabled: false,
},
},
plotOptions: {
column: {
stacking: 'normal',
}
},
series: [
{
type: 'line',
name: 'The Line',
data: [
[1072915200000, 800],
[1104537600000, 900],
[1136073600000, 1000],
[1167609600000, 1100],
[1199145600000, 1200],
[1230768000000, 1300],
[1262304000000, 1400],
[1293840000000, 1500],
]
},
{
type: 'column',
name: 'The Columns',
data: [
[1072915200000, 800],
[1104537600000, 900],
[1136073600000, 1000],
[1167609600000, 1100],
[1199145600000, 1200],
[1230768000000, 1300],
[1262304000000, 1400],
[1293840000000, 1500],
]
}
]
});
Set xAxis' minPadding, maxPadding properties:
xAxis: {
type: 'datetime',
crosshair: true,
minPadding: 0.08,
maxPadding: 0.08
}
https://jsfiddle.net/9xodqw4u/1/
Be advised that if you use a navigator you would need a different approach - navigator sets extremes and padding is reset.
Does anyone have any examples of using Highchart to achieve a result like the one in the image?
function drawChart(result) {
var response =
{
Month: result.Month,
Data: result.Data,
Title: result.title
};
$('#dvChart').highcharts({
chart: {
type: 'column'
},
title: {
text: title
},
xAxis: {
categories: response.Month
},
yAxis: [{
min: 0,
title: {
text: "# Of Tests"
},
},
],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
}
}
}
,
series:
response.Data
});
}
My code above can achieve stacked chart but I dont know how to put cumulative lines to the chart.
To get line type series with stacked column series you should set type of type per series for ones with other type than the one defined in chart.type option.
Example: http://jsfiddle.net/t3v579uj/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['r', 'e', 's', 'p', 'o']
},
yAxis: [{
min: 0,
title: {
text: "# Of Tests"
}
}],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal'
}
},
series: [{
data: [1,2,3,4]
},{
data: [1,2,3,4]
},{
data: [1,2,3,4]
},{
type: 'line',
data: [2,3,4,5]
}]
});
});
I want to know if it will be possible to use the two pane view (as this example) with a stacked area graph ?
I tryed to make it works in a fiddle http://jsfiddle.net/g2xDj/2/, but, the stacked area graph is not displayed.
var stacked_data = [{
name: 'Asia',
data: [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]]
}, {
name: 'Africa',
data: [[1364292000,106], [1364294000,107], [1364296000,111], [1364298000,133], [1364300000,221], [1364302000,767], [1364304000,1766]]
}, {
name: 'Europe',
data: [[1364292000,163], [1364294000,203], [1364296000,276], [1364298000,408], [1364300000,547], [1364302000,729], [1364304000,628]]
}];
var line_data = [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]];
// create the chart
$('#container').highcharts('StockChart',
{
chart : {
//type: 'area',
renderTo : 'container',
zoomType: 'x'
},
plotOptions: {
area: {
stacking: 'normal'
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'Load'
},
height: 200,
lineWidth: 2
},
{
title: {
text: 'Load 2'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}
],
series: [
{
name: "area",
data: stacked_data,
yAxis: 0
},{
name: "line",
data: line_data,
yAxis: 1
}]
});
});
Anybody have an idea to help me ?
In your example you have incorrect structure of series, because in stackedArea you try to push "series" structure for data.
Additionaly you should multiply all timestamp by 1000 to achieve JS timestamp format.
Updated example: http://jsfiddle.net/g2xDj/4/
var series = [{
name: 'Asia',
data: [
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]
}, {
name: 'Africa',
data: [
[1364292000000, 106],
[1364294000000, 107],
[1364296000000, 111],
[1364298000000, 133],
[1364300000000, 221],
[1364302000000, 767],
[1364304000000, 1766]
]
}, {
name: 'Europe',
data: [
[1364292000000, 163],
[1364294000000, 203],
[1364296000000, 276],
[1364298000000, 408],
[1364300000000, 547],
[1364302000000, 729],
[1364304000000, 628]
]
}];
var line_data = {
type:'line',
yAxis:1,
data:[
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]};
series.push(line_data);