I want to increase the chart grid lines to fill the width of the graph.
I have got it till this point: https://jsfiddle.net/mukeshshamra1201/8pu9a5c4/97/
I have used y-axis property to achieve something, but I am not able to figure out the rest.
yAxis: {
min: 0,
title : "",
gridLineDashStyle: 'ShortDash',
labels: {
align :"left",
x:-6,
y:-3
}
}
I want something kike this :
Set spacingLeft and spacingRight to 0:
chart: {
...
spacingLeft: 0,
spacingRight: 0
}
Live demo: https://jsfiddle.net/BlackLabel/3Lpsz0hd/
API Reference: https://api.highcharts.com/highstock/chart.spacing
Related
Hello Highcharts and stackoverflow,
I would like to make it easy for end users to compare wedgets in a Variable radius pie chart (basically the same as Line to the Y axis on hover but radial). As such, when they hover on a wedge, I would like to draw a "ring" around the circle for easy comparisons. This would be appear/disappear/change based on which point you are hovering on.
(in some ways - like a mix between the visualization of the Variable radius pie chart with the concept of an axis like a Polar/Radar Chart)
Any ideas?
Use column series in polar chart with crosshair:
chart: {
polar: true
},
series: [{
type: 'column',
pointPadding: 0,
groupPadding: 0,
colorByPoint: true,
data: [...]
}],
yAxis: {
crosshair: {
color: 'red',
zIndex: 3
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5005/
API Reference:
https://api.highcharts.com/highcharts/chart.polar
https://api.highcharts.com/highcharts/yAxis.crosshair
I have two highcharts on one page one of the charts can add and remove a second or thrid yAxis dynamicly. When this is done of course the width of the xAxis is shorter than the one with only one yAxis.
Now i want to sync the width of the xAxis to keep both charts underneath each other.
When I try the set xAxis width the width is changed but the chartarea is sticking to the left and not to the right.
How can I get draw both chart-areas with the same dimensions?
Here is a fiddle with a small example: Fiddle Fiddle
Best
MrLight
You can use top, width and offset properties to size and position axes. First two of these are not documented but they work.
Live demo: http://jsfiddle.net/BlackLabel/cvey8ap8/
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim'],
width: '90%',
left: '8%',
// Categories for the charts
},
yAxis: [{
min: 0, // Lowest value to show on the yAxis
title: {
text: 'Apple Consumption' // Title for the yAxis
},
left: '7%',
offset: 0
},
{
min: 0, // Lowest value to show on the yAxis
title: {
text: 'Apple12 Consumption' // Title for the yAxis
},
offset: 0
}
],
I use Highchart to draw my charts. I use :
xAxis: {
labels: {
rotation: -45,
align: 'top'
},
categories: xAxisLabel
},
for rotate the xaxis labels when number of labels are large.
But i want that labels automatically rotate when number of labels are large.
Is there any way to do this?
How can i do it?
thanks
Highchart autorotate by default. You can use:
xAxis: {
labels: {
autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90]
}
},
see example in this link:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-autorotation-0-90/
or by default:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-autorotation-default/
Here is the chart I'm using.
How do I change the chart to go low to high? Basically just horizontally flip it. The values need to be changed to go from low to high, too.
You can flip it by reversed axis parameter.
xAxis: {
reversed:true,
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
}
http://jsfiddle.net/M4hML/6/
I have a couple of formatting questions, as you'll see I'm running a very small chart 225*150...
How do I remove the x-axis labels? I still want the information in the tooltip, just not along the axis. I've tried...
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
...but it still shows "0, .5, 1, 1.5 etc..."
I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?
Last one, how do I set zero for the y-axis scale?
Here's a fiddle!
Thanks!
UPDATE: Added suggestions to original fiddle.
In this block:
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
You have
1) the categories property listed inside the title attribute, and
2) you have enabled: false set for the title attribute
categories is a property of the axis directly, and the enabled: false should be applied to the labels, not the title.
"I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?"
Primarily the marker radius property:
http://api.highcharts.com/highcharts#plotOptions.series.marker.radius
You can also look at the lineWidth property of the marker.
"Last one, how do I set zero for the y-axis scale?"
axis min property:
http://api.highcharts.com/highcharts#yAxis.min
updated fiddle: http://jsfiddle.net/jlbriggs/z6ZLt/8/
To disable the xAxis.labels you set enabled to false:
xAxis: {
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled: false,
labels: {
enabled: false
}
}
For doing "set zero for the y-axis scale" you set the yAxis.min value to 0:
yAxis: {
min: 0,
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
To handle the size of the line + markers you need to modify their properties in :
plotOptions: {
series: {
marker: {
radius: 1.5
},
pointWidth: 1
}
}