Following is the chart that I have,
I want to add xaxis for both the charts depending on their data inputs,
where should I make the change or add xaxis so that I can define the min max limits for the xaxis.
here is the fiddle: http://jsfiddle.net/pratik24/n24s2fyk/3/
code:
$(function () {
$('#container').highcharts('StockChart', {
navigator:{
enabled: false
},
scrollbar:{
enabled: false
},
rangeSelector : {
selected : 1,
enabled:false
},
yAxis: [{
min: -1e6,
max: 1e6,
labels: {
align: 'left',
format : ''
},
title: {
text: 'OHLC'
},
height: '30%'
}, { min: -1e6,
max: 1e6,
labels: {
align: 'left',
x: -3,
format : ''
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0
}],
series: [{
inverted: true,
type: 'scatter',
name: 'AAPL',
data: [7.0, 6.9, 9.5, 14.5, 18.4],
yAxis: 0
}, {
inverted: true,
type: 'scatter',
name: 'Volume',
data: [3,6,8,5,2],
yAxis: 1
}]
});
});
Thanks in advance,
Here is the solution:
[http://jsfiddle.net/pratik24/uga37ox0/2/][1]
[http://jsfiddle.net/uga37ox0/1/][1]
thanks to the guys from highcharts suppot team
xAxis: [{
},{
offset: -245,
min: 0,
max: 10
}],
series: [{
inverted: true,
type: 'scatter',
name: 'AAPL',
data: [7.0, 6.9, 9.5, 14.5, 18.4],
yAxis: 0,
xAxis: 1
}, {
inverted: true,
type: 'scatter',
name: 'Volume',
data: [3,6,8,5,2],
yAxis: 1,
xAxis:0
}]
Related
I'm having trouble when zooming in on a linear series that is on a logarithmic yAxis. What would be an easy solution?
Zoom out:
Zoom in:
Linear series is not rescaling correcly, those series should remain on same position relative to main series, is there any missing configs to those series that would adjust them to logarithmic axis?
Demo: https://jsfiddle.net/bernardo0marques/dfqouLm5/30/
Code snippet:
Highcharts.stockChart("container", {
chart: {
type: "line",
zoomType: "xy",
},
series: [
{
data: [
{
x: -220924800000,
high: 63,
low: 56,
close: 62,
open: 56,
name: "01/01/1963",
color: "#F57350",
},
{
x: 1657670400000,
high: 18893.92,
low: 18159.03,
close: 18159.03,
open: 18593.15,
name: "13/07/2022",
color: "#297F0D",
},
],
dataGrouping: {
forced: true,
groupPixelWidth: 0,
units: [["day", 1]],
},
id: "main-series",
name: "Demo series",
type: "candlestick",
yAxis: "default",
},
{
color: "#C0C0C0",
data: [
[-220914000000, 369],
[1659236400000, 198817.91340815497],
],
dashStyle: "LongDash",
id: "upper-tendency",
tooltip: {
valueDecimals: 0,
xDateFormat: "%B %Y",
},
showInLegend: false,
yAxis: "default",
},
{
color: "#C0C0C0",
data: [
[-220914000000, 34],
[1659236400000, 16672.03531810569],
],
dashStyle: "Solid",
id: "lower-tendency",
tooltip: {
valueDecimals: 0,
xDateFormat: "%B %Y",
},
showInLegend: false,
yAxis: "default",
},
],
title: { text: "Logarithmic Zoom: Linear series" },
tooltip: { shared: true, split: false },
xAxis: {
dateTimeLabelFormats: {
second: "%d/%m/%y<br/>%H:%M:%S",
minute: "%d/%m/%y<br/>%H:%M",
hour: "%d/%m/%y<br/>%H:%M",
day: "%d/%m/%y",
month: "%m/%y",
year: "%Y",
},
type: "datetime",
},
yAxis: [
{
id: "default",
opposite: true,
type: "logarithmic",
title: { text: "" },
reversed: false,
offset: 50,
tickInterval: 0.4,
},
],
});
It is a bug which you can track in the following ticket:
https://github.com/highcharts/highcharts/issues/16784
As a temporary workaround, you can set xAxis.ordinal to false in your config.
Demo:
https://jsfiddle.net/BlackLabel/rfxygz5m/
Below is a piece of code that I have, which gives me an output like in the image.
I want the yaxis values to be sorted in the reverse order ie, the top of the Y axis should start from 9 and then 3,0. I tried reversed:true. But it doesn't seems to be working when tickPositions are used. But I need to use them as I have to show the bar at specific points. Is there any way to show the yaxis values in descending order along with tickPositions? Any help would be much appreciated. Thanks in advance.
Highcharts.chart('container', {
chart: {
type: 'bar',
//marginLeft: 150
},
xAxis: {
type: 'category',
title: {
text: null
},
max: 25,
min: 0,
reversed:true,
tickPositions : [9,3,0]
//tickLength: 1
},
yAxis: {
// min: 0,
// max: 10,
title: {
text: 'Votes',
align: 'high'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Votes',
data: [
[0, 10],
[3, 10],
[9, 10],
],
dataLabels: {
//enabled: true,
color: '#333',
//inside: true
}
}]
});
So, you just want it to show as normal with 0 at the coordiante root? No reversed needed?
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'bar',
//marginLeft: 150
},
xAxis: {
type: 'category',
title: {
text: null
},
max: 25,
//min: 0,
reversed:false,
tickPositions : [9,3,0]
//tickLength: 1
},
yAxis: {
reversed: false,
min: 0,
max: 10,
title: {
text: 'Votes',
align: 'high'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Votes',
data: [
[0, 10],
[3, 10],
[9, 10],
],
dataLabels: {
//enabled: true,
color: '#333',
//inside: true
}
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
Angular2-highcharts is throwing a wierd exception when I am trying to port my existing graph. The code for my graph is as shown below:-
http://jsfiddle.net/kkulig/dx2vj8k1/
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
marginLeft: 10
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
xAxis: {
left: '50%',
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
labels: {
align: 'left',
x: -18
},
title: {
text: 'Age Group',
align: 'high',
rotation: 0,
x: 40
}
},
yAxis: [{
left: '55%',
width: '45%',
labels: {
enabled: false
},
title: {
x: -160,
text: 'Female'
},
gridLineWidth: 0
}, {
reversed: true,
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: 170,
text: 'Male'
},
gridLineWidth: 0
}],
series: [{
data: [1, 3]
}, {
data: [2, 5],
yAxis: 1
}]
});
When I try to port this to angular2-highcharts, I get a pretty bizarre error as shown below. What am I doing Wrong?
The plnkr is here http://plnkr.co/edit/UvOmYi?p=preview
The error which I see is below:-
The output of the above Plnkr is here.
This error is because of percentage issue while defining width,left,right.
angular2-highcharts is highcharts plugin for Angular is based on Typescript.
So you cannot use width: '45%', directly because it is string instead use width:window.innerWidth * .45.
http://plnkr.co/edit/Bp3O8SwWjwkLFCRkrQPa?p=preview
chart: {
type: 'bar',
marginLeft: 10
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
xAxis: {
left: window.innerWidth * .52,
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
labels: {
align: 'left',
x: -18
},
title: {
text: 'Age Group',
align: 'high',
x: 10
}
},
yAxis: [{
left: window.innerWidth * .55,
width:window.innerWidth * .45,
labels: {
enabled: false
},
title: {
x: -160,
text: 'Female'
},
gridLineWidth: 0
}, {
reversed: true,
width: window.innerWidth * .45,
offset: 0,
labels: {
enabled: false
},
title: {
x: 170,
text: 'Male'
},
gridLineWidth: 0
}],
series: [{
data: [1, 3]
}, {
data: [2, 5],
yAxis: 1
}]
};
The x-axis label disappears for a polar chart with any endAngle other than default (360)
Works without endAngle: http://jsfiddle.net/qs5v601b/1/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000],
pointPlacement: 'on'
}]
});
});
Does not work with endAngle : http://jsfiddle.net/qtpq84nw/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%',
endAngle: 90
},
xAxis: {
categories: ['Sales', 'Marketing'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000],
pointPlacement: 'on'
}]
});
});
Does anyone know what is causing this?
You need to enable showLastLabel parameter.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am trying to have a Highcharts - Spiderweb like This Demo but I need to Update/hard code the yAxis values. I also need to stylize them the color, font and size. can you please let me know how? Is there any way to stop displaying the default units and only display the chart?
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
Thanks
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
formatter: function() {
return null;
}
},
title: {
text: '10'
},
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
you can also check http://www.highcharts.com/docs/chart-design-and-style/colors for color and style