Related
I'm trying to create a Spider graph that has the y-axes labels offset with extended gridlines.
Is this possible to achieve with just one graph, or do I have to create two separate graphs and overlay them? I've tried ticklines, gridlines, and they all get stuck in the polar coordinates.
Here's my attempt at trying to accomplish this:
http://jsfiddle.net/6d6jrfhs/3/
{
chart: {
polar: true,
type: 'line'
},
title: {
text: "# of Impacts",
x: -80
},
pane: {
size: '80%',
startAngle: 0,
},
xAxis: {
categories: ['Back', 'Left', 'Front', 'Top',
'Right'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
offset: 0,
labels: {
align: 'left',
x: -100,
y: 0
},
tickLength: 500,
plotLines: [{
color: 'red', // Color value
dashStyle: 'longdashdot', // Style of the plot line. Default to solid
value: 40000, // Value of where the line will appear
width: 1 // Width of the line
}]
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
type:'area',
name: 'Low Impact',
data: [43000, 19000, 60000, 35000, 17000],
pointPlacement: 'off'
}, {
type:'area',
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000],
pointPlacement: 'off'
}]
}
This demo shows how to find labels (SVG elements) in the chart object and create additional gridline using SVG Renderer: http://jsfiddle.net/kkulig/eg7p3r48/
events: {
render: function() {
var yAxis = this.yAxis[0],
renderer = this.renderer,
label = yAxis.ticks[0].label;
renderer.path(['M', label.xy.x, label.xy.y, 'l', label.xy.x - xOffset - 30, 0]).attr({
stroke: 'black',
'stroke-width': 1
}).add();
}
}
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
...or what is my fault?
I am trying to set the yAxis.max values on both axis. But it doesn't work.
The left yAxis should go from 330-410 with a tickInterval of 10, the right one from -0.6-1,1 with a tickInterval of 0.1.
Here is a fiddle.
yAxis: [{
labels: {
style: {
color: "#4553c5"
}
},
title: {
text: "ppm",
align: "high",
rotation: 0,
x: 10,
y: -30,
textAlign: 'left',
style: {
color: "#4553c5"
}
},
min: 330,
max: 410,
tickInterval: 10,
gridLineWidth: 1,
gridLineColor: '#efefef',
endOnTick: false
}, {
labels: {
style: {
color: "#ec5d61"
}
},
title: {
text: "°C Anomaly",
align: "high",
rotation: 0,
textAlign: "right",
x: -10,
y: -30,
style: {
color: "#ec5d61"
}
},
min: -0.6,
max: 1.1,
tickInterval: 0.2,
gridLineWidth: 1,
gridLineColor: '#efefef',
opposite: true,
endOnTick: false
}],
What is wrong with it? Thanks for any hints!
When using a dual axis, min and max get confounded by the default alignTicks setting.
Setting alignTicks to false will usually fix the problem
chart: {
alignTicks: false
},
Example:
http://jsfiddle.net/jlbriggs/9hnx0w46/6/
OTOH, using a dual y-axis chart like this is generally a bad idea, as it confounds two series whose interactions don't mean anything, since they are being measured on two different scales.
Useful read on the subject:
https://www.perceptualedge.com/articles/visual_business.../dual-scaled_axes.pdf
When you use multiple yAxis, min and max values usually calculated by HighCharts and these calculated values overrides your settings.
The trick is using tickAmount, startOnTick and endOnTick together.
Here is the solution of your problem: jsFiddle
I have this Highcharts column chart:
http://jsfiddle.net/ltherond/bmk71a8r/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
type: 'linear'
},
credits: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
shadow: false
}
},
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
});
});
I want the first bar to extend horizontally from 0 to 500 on the xaxis.
In other words, I want each bar to start at the current x value and end at the next x value.
How do I do that?
The option you are looking for is connectNulls for your series attribute
From my knowledge this options is only available for Area and Line Charts and no longer available for column or bar chart
I recommend you to change your Chart Type to area chart and use connectNulls option as mentioned in Documentation here
To meet your requirement in Column chart itself you need to tune your data you fed into High chart as follows in your series code segment
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
},{
x: 100,
y: 5,
color: "#00FF00"
},{
x: 200,
y: 5,
color: "#00FF00"
},{
x: 300,
y: 5,
color: "#00FF00"
},{
x: 400,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
This will solve your problem. see the working fiddle http://jsfiddle.net/bmk71a8r/3/
For this approach you need to write extra codes to format your Data
Good Day
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/
I am using highcharts for the first time, and I am trying to figure out how to set the Y axis points static.
I have used min=0 and max=140 , and the points on y axis come up as 0,25,50,75,100,125 and 150. Wherein I want it as 0,20,40,60,80,100,140.
Can someone let me know how could I achieve this.
Below is the highchart optins :
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Div1',
width: 600,
height: 400
},
yAxis:{
min: 0, max: 140,
lineColor: '#FF0000',
lineWidth: 1,
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}]
},
series: [{
name: 'Value',
data: YaxisValuesArray
}]
});
});
You can set the tickInterval (http://api.highcharts.com/highstock#yAxis.tickInterval) on the axis
http://jsfiddle.net/blaird/KdHME/
$(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Div1',
width: 600,
height: 400
},
credits: {
enabled: false
},
title: {
text: 'Productivity Report',
x: -20 //center
},
xAxis: {
lineColor: '#FF0000',
categories: [1, 2, 3]
},
yAxis: {
min: 0,
max: 140,
tickInterval: 20,
lineColor: '#FF0000',
lineWidth: 1,
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Value',
data: [
[1, 10],
[2, 20],
[3, 30]
]
}]
});
});
To do this using HighChart in a StockChart mode, I just need to set the property tickPixelInterval.
yAxis: {
...
tickPixelInterval: 35
...
}