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'm using a high chart.
I want to change the plotLine like this.
Help me.
yAxis: {
min: 0,
max: 100,
title: {
text: '비율(%)',
align: 'middle'
},
plotLines: [{
color: '#FF0000',
width: 5,
value: 80
}],
},
Hi Can somebody help out how can i remove the spacing between the stack bars in highchart.
More white space between bars
below is the code I'm using for rendering the chart.
so in x-axis i tried add style but still it's not working as per expectation
$('#tempstack').highcharts({
chart: {
type: 'bar',
backgroundColor: 'transparent'
},
title: {
text: 'Forms wise progress'
},
xAxis: {
categories: stkTemplateName,
startOnTick: false,
labels: {
rotation: 0,
useHTML: true,
x: 0,
y: 30,
style: {
color: '#000',
font: '12px roboto',
top: '0px',
right: '10px',
'margin-bottom': '0px',
paddingLeft: '0px',
paddingRight: '0px',
paddingTop: '0px',
paddingBottom: '0px',
},
step: 1
},
lineWidth: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
pointWidth: 0.1
},
yAxis: {
gridLineWidth: 0,
min: 0,
title: {
text: ''
},
gridLineColor: '#ffffff',
labels: {
enabled: false
},
minorGridLineWidth: 0
},
plotOptions: {
bar: {
pointPadding: 0,
borderWidth: 0,
},
series: {
stacking: 'normal',
pointWidth: 20,
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Yet-toStart',
data: stkYetToStart
}, {
name: 'Completed',
data: stkCompleted
}, {
name: 'Inprogress',
data: stkInProgress
},
{
name: 'Ongoing',
data: stkOnGoing
}],
});
You can decrease the space between the bars by decreasing groupPadding property - also, you set point width, if you have it fixed, you will not be able to change the space.
plotOptions: {
bar: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0.01
},
Example: https://jsfiddle.net/2c74x5jv/1/
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 some problem with IE 7 to show the chart I designed by Highstock.
When I've tried to design the chart and see it on Chrome, it does not have any problem.
Here is the chart which is exactly I want to see.
http://211.47.191.60/temp/Cap_origin_from_chrome
However, when I've tried to see it on IE 7, it shows like this.
http://211.47.191.60/temp/Cap_from_IE7
Here is the javascript source I've designed through using Fiddle.
$(function () {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'areaspline',
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1D'
}, {
type: 'day',
count: 15,
text: '2W'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 3,
text: '3M'
}, {
type: 'month',
count: 6,
text: '6M'
}, {
type: 'year',
count: 1,
text: '1Y'
}, {
type: 'all',
text: '전체'
}],
inputStyle: {
color: '#039'
},
labelStyle: {
color: 'silver'
},
selected: 1
},
navigator: {
enabled: false
},
xAxis: {
//categories: ['1회차', '2회차', '3회차', '4회차', '5회차', '6회차', '7회차'], // 동적으로 늘려야 함
showFirstLabel: false,
showLastLabel: true,
tickPixelInterval: 150,
tickColor: 'green',
tickLength: 10,
tickWidth: 2,
tickPosition: 'inside',
//type: 'datetime',
//dateTimeLabelFormats: {
// day: '%Y<br/>%m-%d',
// week: '%Y<br/>%m-%d',
// month: '%Y-%m',
// year: '%Y'
//},
labels: {
rotation: -30,
y: 10
}
},
yAxis: {
tickPixelInterval: 40,
tickColor: 'gray',
tickLength: 10,
tickWidth: 2,
tickPosition: 'inside',
gridLineWidth: 1,
gridLineDashStyle: 'longdash',
minorGridLineColor: '#FFF0F0',
minorGridLineWidth: 1,
minorTickInterval: 'auto',
min: 0,
max: 100,
plotLines: [{
value: 90, // DB 에서 평가 기준 받아와 저장 필요
width: 3,
color: 'red',
dashStyle: 'dash',
label: {
text: '평가기준',
align: 'top',
y: -4,
x: 12
}
}],
title: {
align: 'high',
offset: 0,
text: '종합품질점수',
rotation: 0,
y: -10
},
labels: {
formatter: function () {
return this.value + ' 점';
},
x: -30
}
},
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
scrollbar: {
enabled: true,
minWidth: 5,
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
},
series: [{
name: '종합품질점수',
data: [{
name: '1회차',
color: 'red', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("!!!!");
}
},
x: Date.UTC(2013, 0, 1),
y: 32
}, {
name: '2회차',
color: 'red', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("####");
}
},
x: Date.UTC(2013, 0, 2),
y: 41
}, {
name: '3회차',
color: 'red', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("####");
}
},
x: Date.UTC(2013, 0, 3),
y: 54
}, {
name: '4회차',
color: 'red', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("$$$$");
}
},
x: Date.UTC(2013, 0, 4),
y: 67
}, {
name: '5회차',
color: 'red', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("%%%%");
}
},
x: Date.UTC(2013, 0, 5),
y: 74
}, {
name: '6회차',
color: 'blue', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("^^^^");
}
},
x: Date.UTC(2013, 0, 6),
y: 85
}, {
name: '7회차',
color: 'blue', //평가 기준 만족 시 blue, 불만족시 red
events: {
click: function () {
alert("&&&&");
}
},
x: Date.UTC(2013, 0, 7),
y: 91
}],
type: 'area',
pointStart: Date.UTC(2013, 0, 1),
pointInterval: 24 * 3600 * 1000,
showInLegend: true,
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
}
}]
});
});
There is some Korean character, please do not mind about it.
Can anyone help me to solve this problem?
It looks like bug with plotLines in Highcharts, reported: https://github.com/highslide-software/highcharts.com/issues/1478
Possible workaround is to add plotLine in callback, see example: http://jsfiddle.net/f9aTL/12/ (still not perfect solution)
Callback:
function (chart) {
chart.yAxis[0].addPlotLine({
value: 90, // DB 에서 평가 기준 받아와 저장 필요
width: 3,
color: 'red',
dashStyle: 'Dash',
label: {
text: '평가기준',
align: 'top',
y: -4,
x: 12
}
});
});