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.
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 created a graph with Highcharts polar type. The boundaries of chart are overflowing. Can anyone please help me in fixing the graph.
Please find my problem on JSFiddle:
JSFiddle
Code:
$(function () {
$('#container').highcharts({
chart: {
polar: true,
showAxes: false
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 10,
lineColor: "#000000",
gridLineWidth: 5,
gridLineColor: "#000000"
},
yAxis: {
offset: 120,
tickmarkPlacement: 'on',
min: 0,
max: 4,
visible: false,
endOnTick: false
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
},
line: {
color: "#ff0000",
lineWidth: 10
}
},
series: [{
type: 'line',
name: 'Line2',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}]
});
});
This produces axis outside plot area. I would like to increase plot area so as to see the meeting point of extremist end points.
The reason the Plot is overflowing is because you have set a Maximum Value for the yAxis of 4 but in your data you have values that are greater than 4, like 8,7,6 and 5.
Just remove the max: 4 option from the yAxis Object and your Chart will display fine.
I have this Highcharts column chart:
http://jsfiddle.net/ltherond/bmk71a8r/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
type: 'linear'
},
credits: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
shadow: false
}
},
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
});
});
I want the first bar to extend horizontally from 0 to 500 on the xaxis.
In other words, I want each bar to start at the current x value and end at the next x value.
How do I do that?
The option you are looking for is connectNulls for your series attribute
From my knowledge this options is only available for Area and Line Charts and no longer available for column or bar chart
I recommend you to change your Chart Type to area chart and use connectNulls option as mentioned in Documentation here
To meet your requirement in Column chart itself you need to tune your data you fed into High chart as follows in your series code segment
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
},{
x: 100,
y: 5,
color: "#00FF00"
},{
x: 200,
y: 5,
color: "#00FF00"
},{
x: 300,
y: 5,
color: "#00FF00"
},{
x: 400,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
This will solve your problem. see the working fiddle http://jsfiddle.net/bmk71a8r/3/
For this approach you need to write extra codes to format your Data
Good Day
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 using highcharts for the first time, and I am trying to figure out how to set the Y axis points static.
I have used min=0 and max=140 , and the points on y axis come up as 0,25,50,75,100,125 and 150. Wherein I want it as 0,20,40,60,80,100,140.
Can someone let me know how could I achieve this.
Below is the highchart optins :
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Div1',
width: 600,
height: 400
},
yAxis:{
min: 0, max: 140,
lineColor: '#FF0000',
lineWidth: 1,
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}]
},
series: [{
name: 'Value',
data: YaxisValuesArray
}]
});
});
You can set the tickInterval (http://api.highcharts.com/highstock#yAxis.tickInterval) on the axis
http://jsfiddle.net/blaird/KdHME/
$(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Div1',
width: 600,
height: 400
},
credits: {
enabled: false
},
title: {
text: 'Productivity Report',
x: -20 //center
},
xAxis: {
lineColor: '#FF0000',
categories: [1, 2, 3]
},
yAxis: {
min: 0,
max: 140,
tickInterval: 20,
lineColor: '#FF0000',
lineWidth: 1,
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Value',
data: [
[1, 10],
[2, 20],
[3, 30]
]
}]
});
});
To do this using HighChart in a StockChart mode, I just need to set the property tickPixelInterval.
yAxis: {
...
tickPixelInterval: 35
...
}