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/
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
I'm using Highcharts, and want to hide the protrusion of grid line out of the graph area. I mean,
it looks like this now:
and I want it to look like this (The protrusion of grid line in the right of the chart is hidden):
The highcharts config is below:
{
chart: {
width: 420,
height: 350,
style: {
textAlign: 'center',
'text-align': 'center',
},
},
colors: ['#a1cbff'],
title: {
text: undefined,
},
xAxis: {
title: { text: undefined },
tickInterval: 0.1,
max: 1,
min: 0,
gridLineWidth: 1,
},
yAxis: [{
title: { text: undefined },
}],
series: [{
type: 'column',
pointPlacement: 'between',
data: [...SOME_DATA],
}],
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 1,
groupPadding: 0,
shadow: false,
},
},
tooltip: {
formatter() { return this.y; },
},
legend: {
enabled: false,
},
exporting: false,
credits: false,
}
It is possible, however, it is not so simple and intuitive to make it as you expect in Highcharts. Check the demo and code posted below, there you will find the solution with pointRange = 0.1, pointPlacement = -0.5, min: 0.05, max: 0.95 and tickInterval = 0.1.
Code:
Highcharts.chart('container', {
chart: {
width: 420,
height: 350,
style: {
textAlign: 'center',
'text-align': 'center',
},
},
colors: ['#a1cbff'],
title: {
text: undefined,
},
yAxis: [{
title: {
text: undefined
}
}],
xAxis: {
min: 0.05,
max: 0.95,
tickInterval: 0.1
},
series: [{
type: 'column',
pointPlacement: -0.5,
pointRange: 0.1,
data: [
[0.1, 130],
[0.2, 110],
[0.3, 240],
[0.4, 150],
[0.5, 250],
[0.6, 190],
[0.7, 240],
[0.8, 220],
[0.9, 270],
[1, 160]
],
}],
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 1,
groupPadding: 0,
shadow: false,
},
},
tooltip: {
formatter() {
return this.y;
},
},
legend: {
enabled: false,
},
exporting: false,
credits: false,
});
Demo:
https://jsfiddle.net/BlackLabel/wtxd9y2f/
API reference:
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.pointPlacement
Is it possible to create a progress chart in Highcharts like this:
https://0.s3.envato.com/files/84221450/screenshots/weblator_responsive_charts_7_bootstrap.jpg
I believe a bar chart can be customized to create this. But is it possible to change the styling so that no axes are showing and the bar labels are positioned above the bars rather than preceding them?
Possible to recreate but it is not so dynamic( in style ). So you have to adjust css according to data series in chart.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
marginBottom: 120
},
legend: {
enabled: false
},
colors: ['#173c64'],
xAxis: {
categories: ['option 1', 'option 2', 'option 3', 'option 4 ', 'option 5 '],
labels: {
align: 'left',
x: 5,
y: -20, /* to be adjusted according to number of bars*/
style: {
fontSize: "1rem",
color: '#000'
}
},
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
plotOptions: {
bar: {
stacking: "normal",
//groupPadding: 0, //add here
//pointPadding: 0, //add here,
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
title: {
margin: 0,
useHTML: true,
text: "Test",
style: {
"color": "#333333",
"fontSize": "1.5rem",
"fontWeight": "bold"
}
},
series: [{
data: [{
y: 100,
color: '#99ddff'
}, {
y: 10,
color: '#ff8c1a'
}, {
y: 20,
color: '#ff471a'
}, {
y: 60,
color: '#c299ff'
}, {
y: 10,
color: '#99ddff'
}]
}]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I'm creating a polar area chart in Highcharts. I'm having issues with the labels being positioned inside the chart. See an example here:
$('#container').highcharts({
chart: {
polar: true,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title:{
text:''
},
subTitle:{
text:''
},
pane: {
startAngle: 0,
endAngle: 360
},
legend: {
enabled: false
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
yAxis: {
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45,
pointPlacement: 'between',
states: {
hover: {
enabled: true
}
},
dataLabels: {
enabled: true,
format: '<span class="wheel-label" style="color: {point.color}">{point.name}</span>',
style: {
textShadow: false,
width: 150,
fontSize: "16px"
},
}
},
column: {
pointPadding: 0,
groupPadding: 0,
borderWidth: borderWidth
},
},
series: [{
showInLegend: false,
type: 'column',
name: 'Column',
data: data
}],
credits: {
enabled: false
}
});
http://jsfiddle.net/c904atb3/
I notice with the pie charts there are options for "distance" but no such option exists for the polar chart. I'd also like to be able to use "connectors" if possible but I don't see this available for polar either. How can I get more control over these labels?
I've had similar problems getting labels to be "pushed" out from the borders of a polar/spider chart. The way I solved this was to use plot bands to put a ring around the outside rim.
My test can be found here: http://jsfiddle.net/brightmatrix/j3v0zstk/
In this case, I added the following line to your yAxis:
plotBands: [ { from: 8, to: 15, color: '#FFFFFF', zIndex: 5 } ]
The values I used are merely for illustration. If you wanted the colored wedges in your chart to truly go out to 10, define a max value for your yAxis and have the plot bands cover what would extend past the chart edges.
The zIndex value of "5" makes sure the plot bands sit on top of your chart wedges to give the desired effect.
I hope this is helpful!
I managed to fix it by allowing the labels to extend outside the container, then setting the container to overflow:visible. Not ideal but it works.
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
padding: 50,
useHTML: true,
verticalAlign: 'middle',
format: '<div class="wheel-label" style="color: {point.color}">{point.name}</div>',
style: {
textShadow: false,
width: 250,
fontSize: '22px'
},
}
http://jsfiddle.net/c904atb3/2/
In my production code I added a CSS class to each label based on the name so I can tweak positioning in CSS.
You can set label's coordinates like this:
var data = [{
name: "Label 1",
dataLabels: {
x:100,
y:100
},
y: 10,
color: "#9fe642"
},
http://jsfiddle.net/c904atb3/1/