I have a bubble chart and would like to set the interval points on the x-axis to a predefined list. For example, the list is [90, 100, 103, 108, 110, 112, 116, 120]. Here's my code:
jQuery("#center_col_wrapper").highcharts({
chart: {
type: 'bubble'
},
title: {
text: 'Highcharts Bubbles'
},
xAxis: {
allowDecimals: false,
title: {
text: "BUBBLE CHART"
},
categories: ['90', '100', '110']
},
yAxis: {
title: {
text: ""
},
labels: {
enabled: false
}
},
series: [
{
name:"S1", data: [[100,10,87]]
},
{
name:"S2", data: [[100,11,87]]
},
{
name:"S3", data: [[110,12,87]]
},
{
name:"S4", data: [[110,13,87]]
}
]
});
Here's my jsfiddle: http://jsfiddle.net/mLP7U/
You can specify
minTickInterval: 10,
min: 90,
within your xAxis configuration.
See http://api.highcharts.com/highcharts#xAxis.min
and http://api.highcharts.com/highcharts#xAxis.minTickInterval
for explanations on these items. This will make only the 90, 100, and 110 labels appear on your x axis
So I was able to do this using formatter function in labels. I set min to 0, max to 5, and tickInterval to 1. An array was defined and formatter used this array to choose the appropriate label.
var labels = ["70", "90", "100", "110", "130", "145"];
jQuery("#container").highcharts({
chart: {
type: 'bubble'
},
title: {
text: 'Highcharts Bubbles'
},
xAxis: {
allowDecimals: false,
title: {
text: "Change"
},
tickInterval: 1,
min: 0,
max: 5,
labels: {
formatter: function() {
if (labels[this.value]) {
return labels[this.value]
}
return "e"
}
}
},
yAxis: {
gridLineColor: "#ffffff",
title: {
text: ""
},
labels: {
enabled: false
},
tickInterval: 1,
min: 0,
max: 5
},
series: [
{
name:"A", data: [[2,1,87]]
},
{
name:"B", data: [[2,2,87]]
},
{
name:"C", data: [[2,3,87]]
},
{
name:"D", data: [[4,1,87]]
}
]
});
http://jsfiddle.net/mLP7U/6/
Related
I'm new with Highcharts and stuck with a question. I need to display all dates on x axis, but by default, I'm supposing, only even dates are displaying. How can I display all dates?
Here my code:
const options: Options = {
chart: {
type: 'column',
},
title: {
text: '',
},
xAxis: {
crosshair: false,
type: 'datetime',
title: {
text: 'Days',
},
labels: {
format: LABEL_FORMAT[period],
rotation: 90,
align: 'left',
},
},
legend: {
enabled: true,
},
credits: {
enabled: false,
},
yAxis: {
title: {
text: 'Values',
},
},
series: [
{
name: 'test',
type: 'column',
data: [
[1651363200000, 10],
[1651449600000, 15],
[1651536000000, 5],
...
],
},
{
name: 'test 2',
type: 'column',
data: [
[1651363200000, 10],
[1651449600000, 20],
[1651536000000, 30],
...
],
},
],
},
};
This chart is not only used for to display day, but also for months and years.
Please, answer my question
Use the xAxis.tickInterval option. In this case:
xAxis: {
tickInterval: 24 * 3600 * 1000,
type: 'datetime',
labels: {
format: '{value:%Y-%m-%d}',
rotation: 90,
align: 'left'
},
}
Demo:
https://jsfiddle.net/BlackLabel/t0Lohusx/
API Reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval
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'm using candlestick chart of HighChart-HighStock. I want to reduce the gap between candlesticks. It's not so bad when it's on a wide range zoom. But when I zoomed the chart a lot, the padding between candle makes me annoyed because they are too wide apart.
I tried setting pointPadding of plotOption&xAxis to 0, but nothing happened. How can I shrink this gap?
Zoomed chart - too wide gap between candlestick
Wide view chart - not so bad
Highcharts.stockChart('container', {
// title: { text: '---'},
rangeSelector: {
buttons: [
// { type: 'hour', count: 1, text: '1h' },
{
type: 'day',
count: 1,
text: '1d'
},
// { type: 'all', count: 1, text: 'All' }
],
selected: 1,
//inputEnabled: true
},
xAxis: [{
pointPadding: 0,
type: 'datetime',
}, {
type: 'datetime',
}],
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '70%',
lineWidth: 2,
resize: {
enabled: true
}
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2
}],
plotOptions: {
candlestick: {
pointPadding: 0,
downColor: 'blue',
upColor: 'red',
dataGrouping: {
enabled: false,
}
},
line: {
lineWidth: 1,
states: {
hover: {
enabled: false
}
}
}
},
series: [{
name: 'ohlc',
type: 'candlestick',
data: chartData,
},
{
name: 'avg5',
type: 'line',
data: avg5Data,
color: '#FF0000',
},
{
name: 'avg10',
type: 'line',
data: avg10Data,
color: '#0C9B3A',
},
{
name: 'avg20',
type: 'line',
data: avg20Data,
color: '#FF9900',
},
{
name: 'avg60',
type: 'line',
data: avg60Data,
color: '#000000',
},
{
name: 'vol',
type: 'column',
data: moneyData,
yAxis: 1,
color: '#0944a3',
dataGrouping: {
enabled: false,
}
}
],
});
}
You need to set the series.pointPadding combined with series.groupPadding (equal to zero) to achieve the expected effect. Here is the example: https://jsfiddle.net/ahxrk5zq/
series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: data,
groupPadding: 0,
pointPadding: 0.04,
dataGrouping: {
units: [
[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]
]
}
}]
API Reference:
https://api.highcharts.com/highstock/series.candlestick.pointPadding
https://api.highcharts.com/highstock/series.candlestick.groupPadding
My highstock chart chokes on the x-axis labels once I get down any more granular than about 1 day - that is, the data renders properly but the x-axis (time) labels don't seem to update, and become more sparse as I zoom in until they disappear completely. (See images)
Here is a fiddle at a larger time interval where the labels show as expected: http://jsfiddle.net/uhpn8Ljp/2/
Here is a fiddle for the smaller intervals where they don't display: http://jsfiddle.net/4r39730h/1/
I have this as my data setup when the data is received:
return {
chart: {
type: 'areaspline',
zoomType: 'x',
},
credits: {
enabled: false,
},
navigator: {
adaptToUpdatedData: false,
series: {
data: masterSeriesDateValues || dateValues,
},
yAxis: {
gridLineWidth: 0,
startOnTick: false,
endOnTick: false,
minPadding: 0.1,
maxPadding: 0.1,
labels: {
enabled: false,
},
title: {
text: null,
},
tickWidth: 0,
min: 0,
},
},
rangeSelector: {
enabled: true,
inputBoxStyle: { right: '65px', position: 'absolute' },
buttons: [{
type: 'second',
count: 1,
text: '1s',
}, {
type: 'minute',
count: 1,
text: '1min',
}, {
type: 'hour',
count: 1,
text: '1h',
}, {
type: 'day',
count: 1,
text: '1d',
}, {
type: 'month',
count: 1,
text: '1m',
}, {
type: 'year',
count: 1,
text: '1y',
}, {
type: 'all',
text: 'All',
}],
selected: rangeSelectorIndex,
inputDateFormat: dateFormat,
inputEditDateFormat: dateFormat,
inputBoxWidth: 170,
},
exporting: {
enabled: false,
},
xAxis: {
min: xAxisStart,
max: xAxisEnd,
minRange: 1, // one millisecond
},
yAxis: {
min: 0,
},
tooltip: {
formatter: function () {
return `${this.points[0].series.name} : ${(display === 'count' ? this.y : formatBytes(this.y))}`;
},
},
series: [{
id: 'itemSize',
name: display === 'count' ? 'Count of Items' : 'Size of Items',
data: dateValues,
dataGrouping: {
enabled: false,
},
}],
};
I also add a few events and labels on render:
xAxis.events = {
afterSetExtremes: this.afterSetExtremes.bind(this),
};
chart.events = { selection: function (ev) {
that.handleRangeSelection.call(this, ev, that);
} };
chartConfig.tooltip = {
formatter: function () {
let label;
if (display === 'count') {
label = this.points[0].series.name + ': ' + this.y;
} else {
label = this.points[0].series.name + ': ' + formatBytes(this.y);
}
return label;
},
};
In a previous implementation of the app, I was seeing smaller and smaller intervals down to milliseconds, and I just copied and pasted the configuration so I don't understand what could be different.