I want to center YAxis value at zero on Highcharts Column chart with positive & negative values like this: https://drive.google.com/open?id=0B_IZwAPijvleZzBhUnVaSFhBcDQ,
these axis values are dynamic loaded.
With jqPlot there is an option called forceTickAt0 at axis settings that can meet my requirements,
I'd like to know if this is possible with Highcharts, if yes how to do?
Thanks.
Update:
Ok, in order to clearly explain my question, I've created a jsFiddle.
As you see on the chart, the max/min series value at y-axis is 5001/-4280, but Highcharts shows 15000/-5000 at y-axis boundary and I expect it to be 6000/-5000, and if you remove the first value 5001 from y-axis series, Highcharts will show 5000/-5000 at y-axis boundary that's what I expected. So add a 5001 value at y-axis series causes the y-axis boundary becomes too far away.
The key point is I don't want the biggest/smallest series value at y-axis got too much far away from chart max/min boundary value.
Following is the code, for explanation purpose, series data here use fixed values, In a real situation they are all dynamic loaded.
$(function() {
$('#container').highcharts({
chart: {
zoomType: 'xy',
plotBackgroundColor: '#fffdf6',
alignTicks: true,
},
title: {
text: 'Country Illegally Building Num Average Tax',
},
subtitle: {
text: ''
},
xAxis: [{
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
crosshair: true,
title: {
text: 'Country Code',
}
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value} ',
},
title: {
text: 'Illegally Building Num',
},
}, { // Secondary yAxis
min: 0, //Required to start at zero
title: {
text: 'Average Tax ($)',
style: {
color: '#666'
}
},
labels: {
format: '{value} $',
style: {
color: '#666'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
enabled: false
},
series: [{
color: 'red',
negativeColor: 'green',
name: 'Illegally Building Num',
type: 'column',
data: [5001, 369, 475, 891, 3585, 4235, -1711, -3648, -3749, -2555, -4280, -1017, 2001, -900],
tooltip: {
valueSuffix: ' '
}
}, {
name: 'Average Tax',
type: 'line',
data: [140.5, 141, 139.5, 162, 151, 142, 147, 151, 154, 142, 146, 149, 153, 111.5],
yAxis: 1,
tooltip: {
valueSuffix: ' $'
}
}]
});
});
I don't believe there is a forceiTickAt0, but this functionality can easily be accomplished by setting the min/max of the y-axis. For example:
yAxis: {
min:-20,
max:20,
title: {
text: 'Axis Title'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 2
},
This would have a center point at 0, and depending on your data you can dynamically set the max to be the absolute value of the min.
Related
I've been struggling for the past few days with Highcharts Network Graph Link Labels:
network graph with link label
As shown in the screenshot, all labels are not displayed. We should see also 'test 2' between point C and point A.
The issue comes from the javascript arrow function. Whenever I remove it all labels are ok.
Currently, when the graph initializes all labels are here but fade away once it's done.
all details are in JSFiddle here
`Highcharts.chart('container', {
chart: {
type: 'networkgraph',
marginTop: 80,
backgroundColor: '#343a40' //couleur de fonds
},
title: {
text: 'Network graph',
style: {
color: 'white',
}
},
subtitle: {
text: 'A Force-Directed Network Graph',
style: {
color: 'white',
}
},
plotOptions: {
networkgraph: {
keys: ['from', 'to', 'clabel'],
layoutAlgorithm: {
enableSimulation: true,
integration: 'verlet', //euler or verlet euler takes into account velocity
maxIterations:250,
linkLength: 250
},
point: {
events: { }
},
colors: [],
},
},
series: [{
id: 'language-tree',
dataLabels: {
enabled: true,
shadow: false,
bold: false,
color: 'white',
style: {textOutline: 'none'},
allowedOverlap: false, style: {textOutline: false},
linkFormat:'{point.clabel}', // \u2192 {point.toNode.name}
y: -16
},
// Options for the links
link: {
color: 'white', // #9cd4d4 couleur des fleches 89CFF1
width: 1,
},
marker: {
enabled: true,
radius: 12
},
nodes: [
{'id': 'A'},
{'id': 'B'},
{'id': 'C'},
],
data: [
['A', 'B', 'test 1'],
['A', 'C', 'test 2'],
],
}]
});
`
Any help would be highly appreciated!
Thanks
I've tried to modify the highcharts main script before realizing issue was from the arrow function which I don't know how to enhance it.
I'd like to get all the labels shown in the middle of the each link
Quick and dirty solution:
.highcharts-label.highcharts-data-label {
opacity: 1 !important;
}
I want to create a pie chart with 5 slices. Each slice represents a company. I want to have an invisible straight line in the center of each slice. Whenever the user will click on any area inside the slice, it will draw a black dot (or an HTML icon ) on that point in a straight line.
I have attached a rough sketch of what I want to achieve. The red lines will be the invisible red lines as shown in the sketch.
So it's like scoring each company by clicking on its slice. If the user clicks on any area at the end of the slice, the score will be 100% (Company D in sketch) and it will draw a black dot at the end of the straight line in that slice. Similarly, if it clicks slightly before the end of the slice (say 80%, Company B), it will draw a black dot on a straight line at 80%. I will also want to collect all the clicked point percentages of all 5 companies at the end to process further calculations in my HTML code.
I have attached my code:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Pie Chart'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
enabled: false
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
innerSize: 50,
// slicedOffset: 10,
// allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -60,
// format: '<b>{point.name}</b>: {point.percentage:.1f} %'
// format: '{point.percentage:.1f} %'
format: '{point.name}'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
enableMouseTracking: false,
data: [{
name: 'Company A',
y: 1,
color: '#ffdb04'
}, {
name: 'Company B',
y: 1,
color: '#ffdb04'
}, {
name: 'Company C',
y: 1,
color: '#ffdb04'
}, {
name: 'Company D',
y: 1,
color: '#ffdb04'
}, {
name: 'Company E',
y: 1,
color: '#ffdb04',
}
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
plotOptions: {
arearange: {
dataLabels: {
enabled: true,
yLow: 5,
verticalAlign: 'bottom',
inside: true,
color: 'black',
formatter: function(e) {
if((this.x==0) && (this.point.low==this.y))
return this.series.name
}
}
}
},
legend: {
enabled: false
},
series: [{
name: "AREA 1",
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
name: "AREA 2",
data: [
[20, 40],
[20, 40],
]
}]
});
Above is a sample piece of code that I have plotted using the arearange chart. The graph is plotted successfully just as I wanted it to be. But there seems to be a problem. I want the series name "AREA1" and "AREA2" to be shown in the midpoint of the respective y-axis values. ie "Area 1" should be shown at 5(midpoint of 0 and 10) and "Area 2" should be shown at 30(midpoint of 20 and 40). Is there any way to do that? I've tried with specifying yLow value in the plotOptions. But it didn't work for me since the series data is dynamic.
The chart I'm using is highcharts and version is 4.1.5
Please help!! Thanks in advance
You can add mocked scatter series with disabled markers and enabled data labels to show the series name in the proper place:
series: [..., {
linkedTo: 0,
dataLabels: {
format: 'AREA 1'
},
type: 'scatter',
data: [(area1Data[0][0] + area1Data[0][1]) / 2]
}, {
linkedTo: 1,
dataLabels: {
format: 'AREA 2'
},
type: 'scatter',
data: [(area2Data[0][0] + area2Data[0][1]) / 2]
}
]
Live demo: http://jsfiddle.net/BlackLabel/d01e2ymx/
API Reference: https://api.highcharts.com/highcharts/series.scatter
could you please tell me how to add trendlines in highcharts or target lines hight chart .I am able to achieve to draw in fusion chart .
.
http://jsfiddle.net/Tu57h/139/
please see above fiddle link in this developer use trendlines .I need same thing in high chart can we draw trend line in high chart
I try to make same thing in hight chart .I got little bit success but not able to make trendlines in hight chart
here is my fiddle
http://jsfiddle.net/ogwsL7j3/1/
I need to add breadlines in my chart using highcharts
can we show show trend line same as shown in image.
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 250,
y: 300,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
]
},
yAxis: {
title: {
text: ''
},
labels: {
enabled:false
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.8
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}]
});
});
any update of this?
You can use a plotLines on yAxis.
yAxis: {
plotLines: [{
color: '#FF0000',
width: 2,
label:{
text:'trendline',
align: 'right',
x: 0
},
value: 210
}]
},
http://jsfiddle.net/3zs32jLv/2/
I have two y-axis.
using primary y-axis I have created column chart but when I am trying to create line chart using secondary y-axis with negative percentage data values my line chart is going down from x-axis I don't want that so do anyone know about this please help me as soon as possible ?
$(function () {
$('#container').highcharts({
colors: [ '#24CBE5','#FF9655'],
chart: {
type: 'column'
},
title: {
text: 'combine chart'
},
plotOptions: {
series: {
pointPadding:0,
groupPadding:0.3,
borderWidth: 1,
//shadow: false
}
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
categories: ['Oct 15', 'Nov 15', 'Dec 15', 'Jan 15', 'Feb 15','March 15'],
},
yAxis: [{ // Primary yAxis
min: 0,
max: 4,
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
formatter: function () {
return this.value + '$';
}
},
title: {
text: 'Million',
}
}, { // Secondary yAxis
tickInterval:5, //set ticks to 20
min: -30,
max: 10,
column :{
stacking:'percent'
},
title: {
text: '% Percantage',
},
labels: {
formatter: function () {
return this.value + '%';
}
},
opposite: true
}],
series: [
{
type: 'column',
name: 'AB',
data: [3, 3.5, 3.3, 3.6, 2.5,2]
}, {
type: 'column',
name: 'BC',
data: [3.3, 2, 3.3, 3.4, 2.9,3]
}, {
// USE THIS CODE TO GENERATE LINE CHART (I HAVE USED ONLY MILION AND CREATED LINE CHART BUT INSTEAD I WANT TO USE percentage )
type: 'line',
name: '% Percantage',
data: [0.5, 2, 0, 4, 3.7,2.6],
color: '#000000',
//border: 1,
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null // inherit from series
}
}]
});
});
You need to set alignTicks as false.
chart:{
alignTicks: false
}