I am using highcharts graphs, Start point of highcharts is showing in my laptop (maximum resolution: 1920*1080).
But when I am an open same graph in a lower system: maximum resolution (1368*768) That time the first point of x-axis not showing
Note : Given image is not match with data but graph is same.
CODE :
$('#call_cc_graph_data').highcharts({
chart: {
type: 'spline',
zoomType: 'x'
},
title: {
text: 'CPS vs Time'
},
xAxis: {
type: 'datetime',
min : 1533873600000,
max : 1533945599000,
},
series:[{
name: 'CC',
data: [[1533876120000,1],[1533876240000,1],[1533876840000,2],[1533876900000,1],[1533877200000,7],[1533877260000,4],[1533877320000,1]]
}]
});
Expected result of image : It needs to show value 05:00 on starting point of x-axis.
Try with xAxis.startOnTick Doc and maybe xAxis.tickInterval Doc
xAxis: {
type: 'datetime',
min : 1533873600000,
max : 1533945599000,
startOnTick:true,
tickInterval:3600 * 1000 // If 2 hours step is too large
},
Fiddle
You can change default xAxis units option:
xAxis: {
type: 'datetime',
units: [
[
'second', [20, 40]
],
[
'minute', [1, 2, 5, 10, 15, 30]
],
[
'hour', [1, 2, 3, 5, 6, 8, 12]
],
[
'day', [1, 2]
],
[
'week', [1, 2]
],
[
'month', [1, 2, 3, 4, 6]
],
[
'year',
null
]
],
min: 1533876120000,
max: 1533945599000
},
Live demo: http://jsfiddle.net/BlackLabel/pskqo6ad/
API: https://api.highcharts.com/highcharts/xAxis.units
Similar problem: https://github.com/highcharts/highcharts/issues/5437
Related
I have a chart with two yaxis but can't get the second data series to scale to the second axis. What am I missing?
Example: https://jsfiddle.net/32yugp6m/2/
Now I see where the problem is. You have set the series.yaxis to 1 and 2, meanwhile, it needs to be set as series.yAxis 0 and 1. Notice that Axis must be started with capital letter.
Demo: https://jsfiddle.net/BlackLabel/8u2rhegv/
series: [{
name: 'Deg F.',
type: 'line',
yAxis: 0,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 70.8],
[Date.UTC(2020, 1, 22, 12, 1), 70.8],
...
],
},
{
name: 'RH',
type: 'line',
yAxis: 1,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 33.4],
[Date.UTC(2020, 1, 22, 12, 1), 33.4],
...
],
}
]
API: https://api.highcharts.com/highcharts/series.line.yAxis
How would I draw a spline on columns in each category in Highcharts?
Let's say, I have 5 categories on the x-axis, and each category has 4 columns. Now I want a spline that passes through all the 4 columns in the category (each category should have a separate spline on its corresponding columns)
Is it possible if categories and columns change dynamically?
For column series you can disable grouping and set pointPlacement to a number value. Than, you can set x data values for spline series to fit them to the columns:
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'category',
startOnTick: true,
min: 0
},
plotOptions: {
series: {
grouping: false,
pointWidth: 20
}
},
series: [{
data: [1, 1, 1, 1, 1],
pointPlacement: -0.3
}, {
data: [2, 2, 2, 2, 2],
pointPlacement: -0.1
}, {
data: [3, 3, 3, 3, 3],
pointPlacement: 0.1
}, {
data: [4, 4, 4, 4, 4],
pointPlacement: 0.3
}, {
type: 'spline',
pointRange: 11,
data: [
[-0.3, 1],
[-0.1, 2],
[0.1, 3],
[0.3, 4]
]
}, {
type: 'spline',
pointRange: 11,
data: [
[0.7, 1],
[0.9, 2],
[1.1, 3],
[1.3, 4]
]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/bdsfty2o/
API Reference:
https://api.highcharts.com/highcharts/series.column.grouping
https://api.highcharts.com/highcharts/series.column.pointWidth
https://api.highcharts.com/highcharts/series.column.pointPlacement
I have gone through the highstock datagrouping documenation(https://api.highcharts.com/highstock/series.column.dataGrouping), But little unclear about this data grouping option, Things I have noticed is, Data grouping is enabled by default in highstock, I n which we can force the datagrouping by giving custom datagrouping option through units option in datagrouping, The doubt I got is which is the default data grouping(default unit option) in highstock, another one is do we need to tell the datagrouping units for each time interval by which we are gonna show in chart(eg, if the datarange chosen is one month the grouping should by 1 day, If the daterange chosen is one day means the datagrouping units should be by hour),
units: [[
'millisecond', // unit name
[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
], [
'second',
[1, 2, 5, 10, 15, 30]
], [
'minute',
[1, 2, 5, 10, 15, 30]
], [
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
Do we need to specify each unit or do we need to change the units dynamically based on the daterange chosen?
This is what I have done, The based on the daterange the user chosen the grouping units should be changed, Do we need to specify the units based on the daterange chosen and what the units array specifies (Is Giving only one unit as option to the grouping is the functionality, Or the units array options can be chosen based on the timestamps)
Highcharts.stockChart('chart', {
chart: {
zoomType: false
},
legend: {
enabled: true
align: 'right',
verticalAlign: 'top',
x: 0,
y: -20
},
navigator: {
enabled: false
},
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day:"%b %e"
}
},
yAxis: {
opposite : false
},
series: [{
data: data ,
marker: {
enabled: true
},
dataGrouping: {
forced: true,
approximation: "sum"
}
}]
EDIT
While forced option is set to false
which is the default data grouping(default unit option) in highstock
There's a little flaw in the API (https://api.highcharts.com/highstock/series.column.dataGrouping.units) in units section. First it says that it defaults to:
units: [[
'millisecond', // unit name
[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
], [
'second',
[1, 2, 5, 10, 15, 30]
], [
'minute',
[1, 2, 5, 10, 15, 30]
], [
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
and after that "Defaults to undefined." line appears. The first one is correct.
Highcharts automatically finds the best grouping unit from units array. So, in other words: units specifies which groupings can be applied if Highcharts decides that applying data grouping is a good idea.
Enable dataGrouping.forced and use only one key-value pair in units array if you want to make sure that this grouping will be used no matter what e.g.:
units: [[
'hour',
[3]
] // Data will always be grouped into 3 hours periods
These're just general rules - they should be enough to use data grouping successfully.
I am working ReactHigh charts on polar graphs, I want my labels to come in between the sectors of the circle, they are coming on points but i dont want them to come there.
JSfiddle : https://jsfiddle.net/ra73mp0c/12/
Also I want a background color on each of the labels.
Graph as of now :
Desried Outcome :
Please help me .
Config of graph :
const config = {
chart: {
polar: true,
type: 'line',
width: 700,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: null
},
pane: {
size: '80%'
},
xAxis: {
categories: [
'Sales',
'Sales',
'Sales',
'Sales',
'Marketing',
'Development',
'Customer Support',
'Customer Support',
'Customer Support',
'Information Technology'
],
labels: {
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
},
tickmarkPlacement: 'on'
},
yAxis: {
gridLineInterpolation: 'polygon',
min: 0,
tickInterval: 1,
max: 6
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
credits: { enabled: false },
series: [
{
name: 'Allocated Budget',
data: [1, 2, 3, 1, 4, 3, 1, 2, 4, 1],
pointPlacement: 'between'
},
{
name: 'Actual Spending',
data: [2, 4, 2, 1, 3, 4, 2, 2, 1, 4],
pointPlacement: 'between'
}
]
}
Thanks a lot, It would be helpful ig you can edit the fiddle Link https://jsfiddle.net/ra73mp0c/12/
Creating that kind of background for x axis labels is not supported in Highcharts.
As a workaround you can create a phantom series that mimics their look:
{
showInLegend: false,
type: 'polygon',
name: 'Labels background',
data: [
[1, 5],
[2, 5],
[2, 6],
[1, 6]
],
zIndex: -9999
}
labels.distance should be a negative value to make it work.
Demo: https://jsfiddle.net/BlackLabel/63nc1csv/
I have this issue, where I want a shared and custom-formatted tooltip on a Highcharts chart, but at the same time I want the crosshairs to work.
There is no issue on the x axis, but the on the y, it does not follow the pointer.
Any suggestions?
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
crosshair: true
},
yAxis: {
crosshair: true
},
series: [
{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9].reverse()
}
],
tooltip: {
shared: true
}
});
1st JSFiddle example
UPDATE:
Based on the comments given under this post, I've updated the issue.
Now, I have some compromise: I have two crosshairs on the y axis (or, exactly as many as many series item I have...)
The issue is, that if I link the axis options to the 0th option, the scale will be wrong. If I don't (and I don't have an example for that, but you can delete the line and run again), the two series will be at different scales, but since the second option is hidden, the whole think is just a mess.
And if I don't link the options to the 0th item, the crosshairs will not work again...
Any idea for this?
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
crosshair: true
},
yAxis: [
{
crosshair: true
},
{
linkedTo: 0, // delete me and run again
crosshair: true,
visible: false
}
],
series: [
{
yAxis: 0,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
yAxis: 1,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9].reverse().map(value => value - 5)
}
],
tooltip: {
shared: true
}
});
2nd JSFiddle example
If I am thinking correctly,your worry is about the negative value.So for the negative value you can assign min value to yAxis in charts
check Fiddle demo
yAxis: [
{
crosshair: true,
min:-10,
},
{
linkedTo: 0, // delete me and run again
crosshair: true,
visible: false
}
],