I have been working on a horizontal stacked bar in highchart. I need to remove the space between the x-axis and the bar in the chart.
You can get the details from this image:
.
Below are the chart options:
{
"chart":{
"type":"bar",
"renderTo":"ConfigurationTickets"
},
"title":{
"text":null
},
"xAxis":{
"groupPadding":0
},
"yAxis":{
"min":0,
"title":{
"text":null
},
"gridLineWidth":0,
"labels":{
"enabled":true
},
"minorTickLength":0,
"tickLength":0,
"minPadding":0.5,
"maxPadding":0.5
},
"legend":{
"enabled":false,
"reversed":true
},
"plotOptions":{
"series":{
"stacking":"percent",
"minPointLength":1,
"pointWidth":20,
"pointPadding":0,
"point":{
"events":{
}
},
"column":{
"pointPadding":0,
"groupPadding":0
},
"showInLegend":false,
"softThreshold":true
},
"cursor":"pointer",
"bar":{
"groupPadding":0.1,
"pointWidth":20,
"pointPadding":0
}
},
"series":[
{
"data":[
{
"y":3,
"color":"#ac89cb"
}
],
"name":"more than 31"
},
{
"data":[
{
"y":2,
"color":"#8d749a"
}
],
"name":"21 - 30"
},
{
"data":[
{
"y":3,
"color":"#72557b"
}
],
"name":"Less than 20"
}
]}
So, you had a lot of things out of place in your chart options.
Here's an example that uses this updated code to fill the space with the bar:
"plotOptions": {
"series": {
"stacking": "percent",
"minPointLength": 1,
"pointPadding": 0,
"groupPadding": 0,
"cursor": "pointer"
}
}
Fiddle:
http://jsfiddle.net/jlbriggs/muyz8rjz/1/
Related
Highstock chart showing double line on hovering data points to show the tooltip, which supose to be single and should be in sync.
AS one can check in foddle (link shared below and in snashot) the line on hovering are double and somewhat not in sync. In series second object(2end series), if we set xaxis as 0 or remove it then this issue disappears but xaxis labels also gets removed. I need both the xaxis labels and single line on hover.
I am sharing the link to the fiddle:
https://jsfiddle.net/akt6284m/2/
code:
Highcharts.stockChart('container', {
series: [
{
"type":"areaspline",
"color":"rgba(87,169,222,0.8)",
"data":[
{
"y":0,
"x":1608737040000,
},
{
"y":0,
"x":1608737100000,
},
{
"y":2,
"x":1608737160000,
},
{
"y":0,
"x":1608737220000,
},
{
"y":0,
"x":1608737280000,
},
{
"y":0,
"x":1608737340000,
},
{
"y":0,
"x":1608737400000,
},
....
]
},
{
"type":"column",
"groupPadding":0,
"showInLegend":false,
"yAxis":1,
"xAxis":1,
"data":[
{
"y":1,
"x":1608737040000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737100000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737160000,
"color":"#FF3635",
},
{
"y":1,
"x":1608737220000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737280000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737340000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737400000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737460000,
"color":"#02DE27",
},
....
],
"label":{
"format":""
}
},
{
"type":"scatter",
"data":[
[
1608737160000,
0
],
[
1608738060000,
0
]
],
"color":"#FF3635"
}
],
yAxis: [{
height: '50%'
}, {
height: '50%',
top: '50%'
}],
xAxis: [{
tickLength: 0,
lineWidth: 1,
labels: {
enabled: false
},
height: '50%'
}, {
top: '50%',
height: '50%',
}]
});
Please if anyone can help me with this issue.
The column series has different padding for the xAxis by default. Try to use this config for the xAxis which is assigned to the line series.
xAxis: [{
minPadding: 0.021,
maxPadding: 0.021,
labels: {
enabled: false
},
height: '50%'
}, {
top: '50%',
height: '50%',
}]
Demo: https://jsfiddle.net/BlackLabel/eu94vcta/
API: https://api.highcharts.com/highcharts/xAxis.maxPadding
I'm trying to display a chart as a single, horizontal column with a vertical legend below it. Here's what I have so far:
Highcharts.chart('container', {
"legend": {
"itemMarginBottom": 10
},
"responsive": {
"rules": [
{
"condition": {
"maxWidth": 700
},
"chartOptions": {
"legend": {
"layout": "vertical"
}
}
}
]
},
"chart": {
"type": "bar",
"margin": [
0,
0,
44,
0
]
},
"credits": false,
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": true,
formatter() {
let value = this.y * 100;
return value > 4 ? `${ value.toFixed(1) }%` : null;
},
"overflow": "none"
},
"groupPadding": 0,
"pointPadding": 0
},
"series": {
"animation": false,
"pointPadding": 0,
"pointWidth": 40,
"stacking": "percent",
"events": {},
"marker": {
"states": {
"hover": {
"enabled": false
},
"select": {
"enabled": false
}
}
}
}
},
"series": [
{
"name": "Optimized",
"data": [
0.7455639561796032
],
"zIndex": 0
},
{
"name": "Partially Optimized",
"data": [
0.1260607930874859
],
"zIndex": -1
},
{
"name": "Not Optimized",
"data": [
0.064033328190094
],
"zIndex": -2
},
{
"name": "Plant Off",
"data": [
0.06434192254281708
],
"zIndex": -3
},
{
"name": "Communication Failure",
"data": [
0
],
"zIndex": -4
}
],
"title": false,
"tooltip": false,
"xAxis": {
"labels": false,
"maxPadding": 0,
"minPadding": 0
},
"yAxis": {
"endOnTick": false,
"labels": false,
"maxPadding": 0,
"min": 0,
"minPadding": 0,
"reversedStacks": false,
"title": false
}
});
And this is what it looks like:
The chart is responsive, and I'd really like to avoid setting a hardcoded height for the whole chart. Rather, I'd like for the plot height of the chart to be 40px, and for Highcharts to size the height of the chart to include the remaining room for the chart's legend.
Ideally, it would look like this:
Here's a link to the JSFiddle.
You can change height of xAxis and yAxis to 40px and on each redraw event calculate optimal height for chart (top margin + height of the yAxis + bottom margin). Take a look at the example below.
API Reference:
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/chart.events.redraw
Example:
http://jsfiddle.net/e6hf0ms3/
I have a stacked column highstock chart with positive and negative stacks and a horizontal scrollbar. I am trying to have the yAxis with min and max values according to the max data and min data so I've setup those values (after calculating them) in highstock's json.
However, the length of the names of the users on the xAxis are overriding these max values, is there a way around that?
Here's my js fiddle: http://jsfiddle.net/fj6d2/3931/
As the code is too large to be posted here, here's the configuration without all the data:
Highcharts.chart('container', {
"chart":{
"type":"column"
},
"title":{
"text":""
},
"xAxis":{
"min":0,
"max":31,
"categories":[
"Xxx Xxxx",
"Xxx Xxxx",
"Xxx Xxxx",
"Xxx Xxxxx",
],
"labels":{
"style":{
"font-size":"12px"
},
"useHTML":true,
"events":{
}
}
},
"scrollbar":{
"enabled":true,
"barBackgroundColor":"gray",
"barBorderRadius":7,
"barBorderWidth":0,
"buttonBackgroundColor":"gray",
"buttonBorderWidth":0,
"buttonArrowColor":"yellow",
"buttonBorderRadius":7,
"rifleColor":"yellow",
"trackBackgroundColor":"white",
"trackBorderWidth":1,
"trackBorderColor":"silver",
"trackBorderRadius":7
},
"yAxis":{
"title":{
"text":"Time (hh:mm)"
},
"tickInterval":600,
"labels":{
},
"gridLineWidth":0,
"plotLines":[
{
"value":0,
"width":1,
"color":"#000",
"zIndex":4
}
],
"tickmarkPlacement":"on",
"max":45336,
"min":-21443
},
"plotOptions":{
"column":{
"stacking":"normal",
"events":{
}
}
},
"credits":{
"enabled":false
},
"tooltip":{
"shared":true,
"crosshairs":true
},
"legend":{
"align":"right",
"verticalAlign":"top",
"itemStyle":{
"display":"none"
},
"title":{
"text":"Click a colour"
}
},
"series":[
{
"name":"On Task Teacher Recommended",
"data":[
487,
13512,
10064,
2664,
],
"color":"#86E067",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
},
{
"name":"On Task Student Discovered",
"data":[
1276,
5495,
1307,
3369,
],
"color":"#5CB5E5",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
},
{
"name":"Uncategorised",
"data":[
944,
12202,
2920,
4643,
],
"color":"#F98157",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
},
{
"name":"Off Task",
"data":[
-126,
-686,
-1998,
-927,
],
"color":"#E3454D",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
}
]
});
you can truncate long name (xAxis) of highcharts using function
function truncString(str, max, add){
add = add || '...';
return (typeof str === 'string' && str.length > max ? str.substring(0,max)+add : str);
};
And call this function in formatter
"labels":{
"formatter": function() {
return truncString(this.value,8,'...')
},
"style":{
"font-size":"12px"
},
"useHTML":true,
"events":{
}
}
Fiddle demo
The context menu is hidden behind the series when the bar chart series spans across the entire chart. How can I get the menu to not be hidden behind the series?
http://jsfiddle.net/kadams/uy05zby3/2/
$('#container').highcharts({
"chart": {
"type": "bar",
"zoomType": "x"
},
"title": {
"text": ""
},
"xAxis": {
"title": {
"text": ""
},
"categories": [
"A",
"B",
"C"
]
},
"plotOptions": {
"series": {
"stacking": "percent",
"pointPadding": 0.2,
"borderWidth": 0,
"animation": false
}
},
"series": [
{
"name": "Bacon",
"data": [
36.4,
18.9,
17.5
]
},
{
"name": "Pork Chops",
"data": [
105,
93.7,
108.8
]
},
{
"name": "Ham",
"data": [
32.7,
30.7,
34.2
]
}
]
});
I see two solutions for your case:
display button in front of the series: http://jsfiddle.net/uy05zby3/7/
events: {
load: function() {
if(!this.options.chart.forExport) {
this.exportSVGElements[0].toFront();
}
}
}
make space for the button: http://jsfiddle.net/uy05zby3/5/
"chart": {
"type": "bar",
"zoomType": "x",
"marginTop": 30 // make more space on top edge
},
This is happening because of the height value set in the div,
try the following
#container {
min-width: 300px;
max-width: 800px;
min-height: 350px;
margin: 1em auto;
}
fiddle link :)
It provides margin so that no overlay of menu happpens
hope this us helpful
When the Pie chart legend is paginated, the legend items on the first line of the legend are not fully displayed, it is clipped off
Here's the fiddle for it, with the code here:
function(){
$('#container').highcharts({
credits:{
enabled:false
},
legend:{
itemStyle:{
fontFamily:'Arial',
fontSize:'10pt'
},
maxHeight:55,
},
tooltip:{
style:{
fontFamily:'Arial',
fontSize:'10pt'
}
},
title:{
style:{
color:'#000000',
fontFamily:'Arial'
},
text:'Pie legend problem',
margin:50
},
chart:{
renderTo:'container'
},
series:[
{
name:'Incident',
type:'pie',
data:[
{
name:'Nadia Wilshire',
y:49,
color:'#73a8f0'
},
{
name:'ITIL User',
y:15,
color:'#318047'
},
{
name:'David Luie',
y:9,
color:'#f5c533',
},
{
name:'Don Godfire',
y:7,
color:'#004789',
},
{
name:'Bethline Angleen',
y:5,
color:'#f18320',
},
{
name:'Howard Johnwind',
y:3,
color:'#8f5699',
},
{
name:'Luke Smith',
y:3,
color:'#1e90ff',
},
{
name:'(empty)',
y:2,
color:'#3ed662',
},
{
name:'(empty2)',
y:2,
color:'#3ed662',
},
{
name:'(empty3)',
y:2,
color:'#3ed662',
},
{
name:'(empty4)',
y:2,
color:'#3ed662',
},
]
}
],
exporting:{
enabled:true
},
plotOptions:{
pie:{
cursor:'pointer',
size:'95%',
dataLabels:{
enabled:false
},
showInLegend:true,
tooltip:{
pointFormat:'<b>{point.y}</b>'
}
}
}
});
Adjust fontsize by px and use maxHeight accordingly.
legend:{
itemStyle:{
fontFamily:'Arial',
fontSize:'13px'
},
maxHeight:58
DEMO: http://jsfiddle.net/Ly3Zr/