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 have two circle pie charts, they're looking good but I need to change the background color of the inner core:
$(document).ready(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
//backgroundColor: 'rgba(255, 255, 255, 0.0)',
//backgroundColor: 'rgba(255, 255, 255, 0.0)',
backgroundColor: '#FCFFC5',
margin: [0, 0, 0, 0],
spacingTop: 23,
spacingBottom: 23,
spacingLeft: 23,
spacingRight: 23,
plotBorderWidth: 1,
//polar: true,
//type: 'inline'
},
exporting: { enabled: false },
credits: {
enabled: false
},
plotOptions: {
size: '100%',
series: {
states: {
hover: {
enabled: false
}
}
},
pie: {
innerSize: 100,
backgroundColor: '#CCC',
depth: 15,
dataLabels: {
connectorWidth: 0
}
}
},
tooltip: {
enabled: false
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
title: {
text: '<div style="background-color:#2cb5e1;">Today WalkIn<br>67<br>Average wait time<br> 02:00</div>',
align: 'center',
verticalAlign: 'middle',
y: 5,
style: {
color: '#000',
fontWeight: 'bold',
fontSize: '28px',
}
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle",
},
series: { states: { hover: { enabled: false } } },
series: [{
type: 'pie',
dataLabels: false,
shadow: false,
data: [{
name: '',
y: 7,
color: '#fc525a',
}, {
name: '',
y: 5,
color: '#2cb5e1',
}, {
name: '',
y: 18,
color: '#fc8b4d',
}],
innerSize: '65%'
},
{
type: 'pie',
data: [{
name: '',
y: 7,
color: '#fc525a',
}, {
name: '',
y: 5,
color: '#2cb5e1',
}, {
name: '',
y: 18,
color: '#fc8b4d',
}],
innerSize: '80%'
}]
});
});
yellow color background comes out of the two pie chart circles; instead, I wanted to display the color only where text has been placed
Screenshot
You need to draw a custom shape, for example:
chart: {
...,
events: {
load: function() {
var x = this.chartWidth / 2,
y = this.chartHeight / 2,
r = x > y ? y : x;
this.renderer
.circle(x, y, 0.65 * r)
.attr('fill', '#F0F')
.add()
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/apmvgnb4/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle
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/
At the top of doughnut charts with only 1 point in the series, there is always a tiny gap between the start and end of the slice:
http://jsfiddle.net/6E2Bx/
credits: {
enabled: false
},
chart: {
plotBackgroundColor: 'pink',
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'See the gap at 0 degrees',
align: 'center',
verticalAlign: 'middle',
y: 0
},
plotOptions: {
pie: {
borderWidth: 0,
dataLabels: {
enabled: true,
distance: -30,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '70%',
data: [
['Full', 1]
]
}
Close up of the gap:
Am I missing some setting here?
I would prefer not to modify the drawing/svg elements directly, I feel like borderWidth: 0 should be handling this.
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
}
});
});