I have been trying this for hours and still have no idea.
Here is the config that I am using
chart: {
type: 'xrange',
height: 800,
},
title: {
text: 'Patient Sessions Overview'
},
xAxis: {
title: 'Time of the Day',
type: 'datetime',
tickInterval: 3600*1000,
tickPixelInterval: 200,
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M', this.value);
},
},
min: Date.UTC(2016,1,1),
max: Date.UTC(2016,1,2),
},
yAxis: {
title: 'Day of the Month',
type: 'datetime',
tickInterval: 3600*1000*24,
//tickPixelInterval: 100,
min: Date.UTC(2016,1),
max: Date.UTC(2016,2) - 3600*1000*24
//min: 0,
//max: 31
},
plotOptions:{
series: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
name: 'Sessions',
//pointStart: Date.UTC(2000,0,1),
//pointInterval: 3600*1000,
//pointPadding: 10,
// groupPadding: 0,
borderRadius: 5,
pointWidth: 20,
data: [{
x: Date.UTC(2016, 1, 1, 0),
x2: Date.UTC(2016, 1, 1, 9),
y: Date.UTC(2016,1,4)
}, {
x: Date.UTC(2016, 1, 1, 12),
x2: Date.UTC(2016, 1, 1, 15),
y: Date.UTC(2016,1,5)
}, {
x: Date.UTC(2016, 1, 1, 8),
x2: Date.UTC(2016, 1, 1, 9),
y: Date.UTC(2016,1,14)
}, {
x: Date.UTC(2016, 1, 1, 8),
x2: Date.UTC(2016, 1, 1, 9),
y: Date.UTC(2016,1,20)
}, {
x: Date.UTC(2016, 1, 1, 8),
x2: Date.UTC(2016, 1, 1, 23),
y:Date.UTC(2016,1,25)
},],
}]
Here is the jsfiddle link
I need to remove the chart to make full use of the plot area without leaving a huge white space on both ends.
It is problem with unsorted data. In fact, you can not sort your data as Highcharts would expect, because some of the points are starting before previous one are ended. However, for such case, series.pointRange = 1 resolves all issues, take a look: http://jsfiddle.net/umndydLL/1/
Use following in your chart config:
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
margin:0,
padding:0
Related
I have created an x-range chart to represent some ranges. I want to make both x-axis and the y-axis as DateTime types. Currently, both the x and y-axis are numbers. I have created a fiddle to show my current behavior.
How can I make the x and the axis DateTime type?
https://jsfiddle.net/bonyfus/t4vz0Lkw/
Highcharts.chart('container', {
chart: {
type: 'xrange',
animation: false,
inverted: true
},
credits: false,
exporting: false,
title: {
text: 'Highcharts X-range'
},
plotOptions: {
series: {
pointPadding: 0,
pointWidth: 20,
borderWidth: 0,
borderRadius: 0,
grouping: false,
},
},
xAxis: {
gridLineWidth: 1,
reversed: false,
tickInterval: 1,
startOnTick: true,
endOnTick: true,
min: 0,
max: 23,
title: {
text: 'Hours',
}
},
yAxis: {
min: 0,
max: 7,
tickInterval: 1,
tickWidth: 1,
gridLineWidth: 1,
endOnTick: false,
startOnTick: false,
reversed: false,
title: {
text: 'Days',
}
},
legend: {
useHTML: true,
y: 0,
enabled: true,
floating: false,
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
symbolWidth: 30,
symbolHeight: 22,
symbolRadius: 0,
squareSymbol: false,
borderWidth: 0,
itemDistance: 10,
itemMarginBottom: 6,
itemStyle: {
fontSize: '12px',
fontWeight: 'normal',
textAlign: 'center',
padding: '0px',
opacity: 1,
},
itemHoverStyle: {
opacity: 1,
fontWeight: 'bold',
},
itemHiddenStyle: {
opacity: 0.7
},
},
series: [{
name: 'Drilling',
data: [{
x: 0.01,
x2: 0.04,
y: 1,
color: 'blue',
},
{
x: 20,
x2: 23,
y: 1,
color: 'blue',
},
],
dataLabels: {
enabled: true
}
},
{
name: 'Tripping',
data: [{
x: 10,
x2: 15,
y: 5,
}, ],
dataLabels: {
enabled: true
}
},
{
name: 'Sliding',
data: [{
x: 15,
x2: 20,
y: 5,
color: 'green',
}, ],
dataLabels: {
enabled: true
}
},
{
name: 'Circulating',
data: [{
x: 20,
x2: 23,
y: 5,
color: 'purple',
},
{
x: 20,
x2: 23,
y: 6,
color: 'purple',
}
],
dataLabels: {
enabled: true
}
}
]
});
First of all, please notice that in the chart, the x-axis is usually the horizontal one.
When you invert the chart the x-axis is now vertical.
In order to change the axis type to datetime you have to properly declare the data. Usually, it's declared in milliseconds, or you might set the date and use the Date.UTC method to convert that into milliseconds as I did it in the demo below. The confix below for the y-axis is for the horizontal axis in this case.
yAxis: {
type: 'datetime',
min: Date.UTC(2020, 11, 5, 0, 0, 0),
tickInterval: 60 * 60 * 1000, // i hour interval,
endOnTick: false,
startOnTick: false,
reversed: false,
title: {
text: 'Days',
}
},
API:
https://api.highcharts.com/highcharts/xAxis.tickInterval
Demo:
https://jsfiddle.net/BlackLabel/bxqnkvm6/
I've got a spline chart with two y-axis which both use the same x-axis cycles (seconds). Zoom (xy) is enabled and works fine but now i want to zoom xy only on one series that is connected to one of the two y-axis. The other series should be static for y-axis (y-zoom disabled), so that they not zoom into y-axis... is this possible?
chart: {
renderTo: 'container',
type: 'spline',
zoomType: 'xy',
alignTicks: false,
resetZoomButton: {
theme: {
display: 'none'
}
}
},
title: {
text: '',
x: -20 //center
},
legend: {
enabled: false //Hide the legend
},
credits: {
enabled: false //Hide credits (highcarts.com link)
},
exporting: {
enabled: false //Hide export menu
},
xAxis: {
title: {
text: 'sec'
},
type:'second',
lineColor: '#666666',
lineWidth: 2,
endOnTick: false,
showFirstLabel: false,
startOnTick: true,
gridLineWidth: 0, //Shows a grid starting from the tick within the data content
tickInterval:1,
tickLength: 10, //Tick length (height)
tickWidth: 2, //Tick width (2px)
tickColor: '#666666',
minorGridLineWidth: 0, //Shows a grid starting from the tick within the data content
minorTickInterval:.1,
minorTickLength: 6, //Minortick length (height -> half of tick tickLength)
minorTickWidth: 1, //Minortick width (1px)
minorTickColor: '#666666',
min: 0, //Prevent for generating sizes lower than 0 on x-axis
max: 15,
labels:{
y: 25
}
},
yAxis: [{
title: {
text: 'm/s'
},
gridLineWidth: 0,
lineColor: '#8BC926',
lineWidth: 2,
min: 0,
max: 200,
offset: 15 //Space between y-axis and x-axis
}, {
title: {
text: 'Bar'
},
gridLineWidth: 0,
lineColor: '#389FFF',
maxZoom: 0,
lineWidth: 2,
min: 0,
max: 300
}],
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
color: '#8BC926',
data: [
{x: 0, y: 80},
{x: 1, y: 110},
{x: 2, y: 100},
{x: 3, y: 50},
{x: 4, y: 75},
{x: 5, y: 90}
],
yAxis: 0
},
{
color: '#389FFF',
data: [
{x: 0, y: 170},
{x: 1, y: 210},
{x: 2, y: 240},
{x: 3, y: 210},
{x: 4, y: 170},
{x: 5, y: 100}
],
yAxis: 1
}]
JS Fiddle (Full example code)
It's not a part of the API, but you can use yAxis.zoomEnabled option: http://jsfiddle.net/0zczvLr9/ - just set for these axes which you don't want to enable zooming.
I have a need with HighCharts graphs to display a line chart with 3 series and triangle markers on the same line. I have this a JSFiddle that seems to be working ok, but if the points are too close together a whole series becomes invisible.
$(function () {
$('#container').highcharts({
title: {
text: null
},
chart: {
type: 'line',
plotBackgroundImage: null,
backgroundColor: 'transparent',
width: 350,
height: 520,
borderWidth: 0,
marginTop: 0,
marginBottom: 50,
marginLeft: 140,
},
legend: {
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 20
},
xAxis: {
type: 'datetime',
lineWidth: 2,
lineColor: "#FF0000",
label: {
enabled: true,
format: "{value}"
}
},
yAxis: {
labels: {
enabled: false
},
gridLineColor: '#197F07',
title: {
text: null
}
},
plotOptions: {
series: {
marker: {
radius: 8,
symbol: "triangle"
}
},
line: {
lineWidth: 0
}
},
series: [{
data: [
[Date.UTC(2010, 0, 1), 0],
[Date.UTC(2010, 5, 1), 0],
[Date.UTC(2010, 11, 1), 0]
],
color: "#FF0000",
name: 'Group 1',
}, {
data: [
[Date.UTC(2010, 2, 1), 0],
[Date.UTC(2010, 3, 1), 0],
[Date.UTC(2010, 8, 1), 0]
],
color: "#00FF00",
name: 'Group 2'
}, {
data: [
[Date.UTC(2010, 1, 1), 0],
[Date.UTC(2010, 6, 1), 0],
[Date.UTC(2010, 9, 1), 0],
[Date.UTC(2011, 5, 1), 0]
],
color: "#0000FF",
name: 'Group 3'
}]
});
});
In this case, on the jsfiddle, the green triangles are invisible unless you hover over them. If the chart width is set to 550, the green triangles become visible.
I'd like to find a way to make these visible at all times. Thanks!
I'm not sure why this problem occurs originally, but it seems to be solved by explicitly stating enabled: true for plotOptions.series.marker. Like this:
plotOptions: {
series: {
marker: {
enabled: true, // Added
radius: 8,
symbol: "triangle"
}
},
line: {
lineWidth: 0
}
}
See this updated JSFiddle demonstration.
i have a gauge charts with defined tick positions and want to show some text labels there. e. g.:
-300 => Text 1
-200 => Text 2
-100 => Text 3
...
Is there a way to do that? Here's a fiddle of the chart.
jsfiddle.net/r8d3jnx6/
$('#container').highcharts({
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
tooltip: {
enabled: false
},
pane: {
startAngle: -70,
endAngle: 70,
background: null
},
plotOptions: {
gauge: {
dial: {
baseWidth: 2,
baseLength: '100%',
radius: '100%',
rearLength: 0
},
pivot: {
radius: 5
},
dataLabels: {
enabled: false
}
}
},
yAxis: [ {
min: -300,
max: 500,
tickPositions: [-300, -200, -100, 0, 100, 200, 300, 400, 500],
lineColor: '#933',
lineWidth: 0,
minorTickPosition: 'outside',
tickLength: 0,
minorTickLength: 0,
labels: {
distance: 12,
//rotation: 'auto'
},
//categories: ['Grunder'],
offset: 0,
plotBands: [{
from: -300,
to: 2,
thickness: 15,
color: '#55BF3B'
}, {
from: 0,
to: 202,
thickness: 15,
color: {
linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
stops: [
[0, '#55BF3B'], //green
[1, '#DDDF0D'] //yellow
]
}
}, {
from: 200,
to: 500,
thickness: 15,
color: {
linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
stops: [
[0, '#DDDF0D'], //yellow
[1, '#ff0000'] //red
]
}
}]
}, {
min: -200,
max: 200,
lineColor: '#339',
tickColor: '#339',
minorTickColor: '#339',
offset: -100,
lineWidth: 2,
labels: {
enabled: false
},
tickLength: 5,
minorTickLength: 5,
endOnTick: false
}],
series: [{
data: [250]
}]
});
You can use a yAxis.labels.formatter function to check what the label value is, and return a text of your choice depending on that value.
To take your example, it could look like this:
yAxis: {
labels: {
formatter: function() {
if(this.value == -300) return '-300 => Text 1';
if(this.value == -200) return '-200 => Text 2';
if(this.value == -100) return '-100 => Text 3';
return this.value;
}
}
See this updated JSFiddle of how it works. As you can see you'll have to face the potential issue of labels overlapping the gauge, but you can fix that with distance, rotation and some other attributes (see API), depending on how your labels end up looking.
I am trying to have some cells half empty like here:
http://jsfiddle.net/fuw65g95/3/
But When there is not a cell on top of one half coloured, it is shown only in one colour: http://jsfiddle.net/fuw65g95/6/
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ {
x: 0,
y: 0,
value: 90,
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#000000'],
[0.49999999, '#000000'],
[0.5, '#007340'],
[1, '#007340']
]
}
}],
And where there is one on top, it works fine http://jsfiddle.net/fuw65g95/7/
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ { ... }, [0,1,2]],