I have not been able tow work out how to extend my column highchart right to the very edge.
In the image below, the blue area is the highcharts div, and the red area is the "wasted space" I want to elimiate.
What is the best way to do this?
EDIT: here is my (simplified) config in coffee script and a gif to better explain the problem
graphEl.highcharts
chart:
animation:false
margin: [0,0,0,0]
spacing: [0,0,0,0]
zoomType: false
credits:false
navigation:
buttonOptions:
enabled: false
pane:
size: "100%"
plotOptions:
spline:
marker:
radius: 0
line:
border:1
marker:
radius: 0
column:
grouping:false
pointPadding: 0
pointPlacement: "on"
groupPadding: 0
padding:0
borderWidth: 0
borderColor: "transparent"
title:
text: ""
subtitle:
text: ""
xAxis:
startOnTick: true
endOnTick: true
lineColor: "#F3F3F3"
tickColor: "#F3F3F3"
labels:
enabled:false
step:1
yAxis: [ # Primary yAxis
type: 'column'
min:0
gridLineWidth: 0
minorGridLineWidth: 0
lineColor: "#3782C1"
labels:
format: ""
style:
display: "none"
title:
text: ""
style:
display: "none"
]
dataLabel:
useHTML:true
legend:
padding: 0
floating: true
style:
display: "none"
series: seriesList
you can achieve that my managing group padding and point padding.
by setting both of them to 0 you can get rid of that extra spacing but that will result in equal reduction of space between the interior columns as well. so advice you to go with, tickmarkPlacement option.
xAxis : {
tickmarkPlacement : 'on'
}
Examples
tickmarkPlacement : http://jsfiddle.net/oj3odzkf/
managing groupPadding as well: http://jsfiddle.net/oj3odzkf/1/
Hope this will help you
Related
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/
Is it possible to make an arearange series like the following? :
I saw the option to set oppacity, but that will give the series like the following:
Is there a way to hide the top line or to set the opacity of top line only?
You can set only lineWidth for whole area-range series. Instead you can disable that line, and use separate series: http://jsfiddle.net/9agdf5ar/
series: [{
name: 'Temperature',
data: averages,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
dataLabels: {
enabled: true
},
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}]
Concerning http://jsfiddle.net/5gjne/10/ I would like simply hide the "red" range series (range2) into tooltip, how to make this?
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
Thanks!
If you disable mouse tracking on that series it'll be excluded from tooltip.
{
name: 'Range',
data: ranges2,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
color: 'red',
zIndex: 0,
enableMouseTracking: false //<--add this
},
See updated fiddle.
How do I make a slight shadow or color come up below the x axis for zero valued points in column charts?
Right Now nothing is shown.
Setting the minPointLength property makes a line come up above the x Axis.
Any help or pointers would help.
Below are my options:
plotOptions: {
column: {
shadow: false,
pointWidth: 11.5,
borderWidth: 0.5,
enableMouseTracking: false,
minPointLength: 1
}
},
yAxis: {
labels: {
align: 'left',
style: {
color: 'gray',
fontWeight: 'normal',
fontSize: '8.5px',
fontFamily: 'Arial'
}
},
minorGridLineWidth: 1,
minorTickInterval: 10000,
minorGridLineColor: 'white',
minorTickWidth: 0,
title: {
text: '',
rotation: 270.0,
style: {
fontWeight: 'normal'
},
margin: 20,
style: {
fontWeight: 'normal',
fontFamily: 'Arial',
color: '#666666',
fontSize: '11px'
}
},
opposite: true,
min: 0,
max: 500000,
tickInterval: 100000,
gridLineWidth: 0.0
}
This gives me a 1px point above x Axis.
But what I am looking for is a small shadow/1px point below the xAxis.
The only way I have found to accomplish something like this is to convert 0 values to negative values (I have most often done something where I have a very small column that goes from -1 to 1, straddling the 0 line)
How large of a spread your data has will determine what negative value you need to specify.
http://jsfiddle.net/jlbriggs/JVNjs/307/
data: [7,12,16,-1,32,64]
{{Edit:
updated example with startOnTick:false - http://jsfiddle.net/jlbriggs/JVNjs/309/
I am generating my x-axis and y-axis data dynamically and displaying highcharts, but the chart becomes messy when the x-axis range is high with small intervals.
How do I make highcharts to make normal horizontally scrollable graph?
Here is what I am using right now:
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
//CODE FOR HIGHCHARTS JS
function makeChart() {
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 100
},
title: {
text: 'Banana',
x: -20 //center
},
subtitle: {
text: 'Source: banana.com',
x: -20
},
xAxis: {
categories: xlist
},
yAxis: {
title: {
text: 'No. of C'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: $("#repoSelector option:selected").text(),
data: ylist
}]
});
}
Two ways to achieve a scroll bar.
Option 1
You will need to use highstock.js and instead of rendering a stock chart, you have to render a highchart.
Then enable the scroll bar
scrollbar: {
enabled: true
}
Check the API for scroll bar and related operations here.
Here I have fiddled an example.
Option 2
Try setting min & max attributes to the x-axis.
xAxis: {
categories: [...],
min: 0,
max:9
}
Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories.
find the fiddled example here.
To enable scrollbar in x-axis, try this
xAxis: {
categories: xlist,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
},
Check the jfiddle here: https://jsfiddle.net/BhavyaAprajita/zja90wf2/1/
Also, make sure that you import the highstock library
src="https://code.highcharts.com/stock/highstock.js"
add this
const Highcharts = require('highcharts/highstock');
comment this if you have
// import Highcharts from 'highcharts';
change xAxis to like this
xAxis : {
categories: [],
min:0,
max:9,
scrollbar: {
enabled: true
}
}
Use
require('highcharts/highmaps') instead of require('highcharts') in imports<br>
#NgModule({<br>
...<br>
imports: [<br>
BrowserModule, <br>
ChartModule.forRoot( <br>
require('highcharts/highmaps')<br>
],<br>
})