I'm trying to add Highcharts to my page, but the problem is my DIV tag size is quite small (233px,98px) and I want to show minorTickInterval in it, but highcharts truncate them because of small DIV size.
http://jsfiddle.net/a62nhs7f/
Is there anyway to show the inner lines of the interval in the small size?
var options = {
title: {
text: ''
},
labels: {
enabled: false
},
title: {
text: '',
align: 'high',
enabled: false
},
subtitle: {
text: '',
align: 'high',
enabled: false
},
/*
xAxis: {
tickInterval: 1,
breaks: [{
from: 5,
to: 10,
breakSize: 1
}]
},
*/
legend: {
enabled: false
},
yAxis: {
gridLineWidth:1,
lineWidth: 1,
min: 0,
//tickWidth: 1,
minTickInterval:5,
minorGridLineWidth:1,
minorTickInterval: 0.1,
minorTickLength: 2,
//type: 'logarithmic',
minorTickInterval: 5,
//minorTickInterval: 'auto',
//minorTickLength: 0,
title: {
text: '',
//align: 'high',
enabled: false
},
labels: {
//enabled: false,
style: {"font-size":'8px'},
formatter: function() {
return this.value;
}
}
},
xAxis: {
min: 0,
tickmarkPlacement: 'on',
title: {
enabled: false
},
labels: {
enabled: false
},
/*gridLineColor: '#c9d5ba',
gridLineWidth: '1',
lineColor: '#222222',
lineWidth: 0,*/
categories: [1.2, 2, 3.1, 4.3, 5.1, 5.9, 6.7, 7.5, 8.3, 9.1, 9.8, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
labels: {
formatter: function () {
return '<a style="color:green" data-value="' +[this.value] + '">' +
this.value + '</a>';
},
style: {"font-size":'8px'}
}
},
series: [{
data: [5.7, 11.1, 22.2, 38.1, 51, 66.6, 83.3, 101.1, 118.6, 135.7, 150.9, 161.4, 169.2, 172.8, 176.8, 178.5, 179.7, 179.9, 180, 179.9, 179.1]//,
//pointInterval: 500
}]
};
Thanks
You can disable the line markers. I think It is better solution for you.
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
Chek my demo.
Related
I have code from this post, when I increase the number of years,
xAxis: {
....
min: 0,
max: 3, // This is dynamic
The chart gets limited only to 0,1 years. how can I make the chart spans end to end so that it looks like this
Edit: the problem is that x-axis "years invested" comes from a variable and the no. of years changes e.g. in this problem it is 3, so the chart needs to go expand all the way from 0 to 3 (left to right) on the x-axis as is in the screenshot, I used max to show 3 years on x-axis, and the 3 values I will plot on y-axis will come from variables as well, in this e.g. its '22286,12286,9286' i will have only these 3 values and the graph will start from 0. so I cannot put any other arbitrary value in the series
var chart = Highcharts.chart('container', {
colors: ['#762232', '#EFCA32', '#007788'],
title: {
text: '',
},
chart: {
type: 'area',
backgroundColor: null,
// spacingRight: 5,
spacingTop: 5,
spacingBottom: 5,
style: {
fontFamily: 'Arial, sans-serif',
},
plotBorderWidth: 1,
plotBorderColor: '#ccc',
},
xAxis: {
gridZIndex: 4,
gridLineWidth: 1,
tickInterval: 1,
tickWidth: 0,
alignTicks: true,
gridLineColor: '#762232',
minPadding: 0,
maxPadding: 0,
min: 0,
max: 3,
title: {
text: 'Years Invested',
},
labels: {
enabled: true,
},
},
yAxis: {
gridLineWidth: 0,
opposite: true,
title: {
text: 'Hypothetical Value',
},
showFirstLabel: false,
showLastLabel: false,
tickPositioner: function() {
var prevTickPos = this.tickPositions,
tickPositions = [prevTickPos[0], prevTickPos[prevTickPos.length - 1]],
series = this.chart.series;
series.forEach(function(s) {
tickPositions.push(s.processedYData[s.processedYData.length - 1]);
});
tickPositions.sort(function(a, b) {
return a - b;
});
return tickPositions;
},
labels: {
enabled: true,
align: "right",
reserveSpace: true,
},
},
tooltip: {
enabled: !1,
},
plotOptions: {
area: {
pointStart: 0,
stacking: false,
lineColor: '#762232',
lineWidth: 1,
fillOpacity: 1,
dataLabels: {
crop: !1,
color: '#762232',
align: 'right',
y: 5,
},
marker: {
enabled: !1,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: !1,
},
},
},
},
},
series: [{
data: []
}, {
data: []
}, {
data: []
}]
});
document.getElementById('chartInit').addEventListener('click', function() {
chart.update({
series: [{
data: [0, 22286]
}, {
data: [0, 12286]
}, {
data: [0, 9286]
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<button id="chartInit">Init chart</button>
<div id="container"></div>
You need to define data in [x, y] format and use yearsInvested variable as a value of the second point.
const yearsInvested = 10;
chart.update({
series: [{
data: [
[0, 0],
[yearsInvested, 22286]
]
}, {
data: [
[0, 0],
[yearsInvested, 12286]
]
}, {
data: [
[0, 0],
[yearsInvested, 9286]
]
}]
});
Live demo: https://jsfiddle.net/BlackLabel/zun7cdge/
API Reference: https://api.highcharts.com/highcharts/series.area.data
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>
I have created one highchart in jsfiddle
Highcharts.chart('container', {
chart: {
type: 'areaspline',
},
title: {
text: 'Soverign Capped 1 year PD',
align: 'left',
backgroundColor: 'gray',
style: {
fontSize: "12px",
}
},
subtitle: {
text: '30 days moving average',
align: 'left',
style: {
color: 'gray',
fontSize: "8px",
}
},
xAxis: {
categories: [
'10/11/2019',
'11/11/2019',
'12/11/2019',
'1/11/2020',
'2/11/2020',
'3/11/2020',
'4/11/2020'
],
min: 0.5,
max: 5.5,
startOnTick: false,
endOnTick: false
},
yAxis: {
title: {
text: 'PD%',
align: 'high',
fontWeight: 'bold'
},
max: 25,
startOnTick: false,
endOnTick: false
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false
},
states: {
inactive: {
opacity: 1
}
},
dataLabels: {
enabled: true,
inside: true,
style: {
fontWeight: "bold",
},
formatter: function() {
if (this.x == "4/11/2020") {
return this.series.name;
}
}
}
},
enableMouseTracking: false,
tooltip: {
enabled: false
},
areaspline: {
fillOpacity: 1,
},
},
series: [{
color: '#fbb189',
name: 'Deitrioting',
showInLegend: false,
data: [25, 25, 25, 25, 25, 25, 25]
},
{
color: '#fff2d0',
name: 'Stable',
showInLegend: false,
data: [3, 4, 5, 5, 4, 10, 10]
}, {
color: '#c2e0b7',
name: 'Improving',
showInLegend: false,
data: [1, 3, 4, 3, 3, 5, 7]
},
{
name: '',
showInLegend: false,
type: 'spline',
data: [7.0, 6.9, 9.5, 12, 23, 4, 3]
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Currently, I have defined different colour for the different series. But for the last date, I want to set the red colour for all the series.
Can you help me with this?
Sample image attached below.
You can use zones:
plotOptions: {
...,
areaspline: {
...,
zones: [{
value: 5.5
}, {
color: 'red',
value: 6.5
}],
},
}
Live demo: https://jsfiddle.net/BlackLabel/m4u5zt8g/
API Reference: https://api.highcharts.com/highcharts/series.area.zones
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
}]
};
I cant seem to fix the Y axis scales on my chart. My JSFiddle code is here.
As you hover over the lines, the value that pops up does not match the scales on the Y Axes (Example, when you put your cursor towards the center of the graph, the Black Line has the value of 60% but when you look at the Y axis scale, it says 200%).
How would I go about fixing the Y axes so they show the appropriate values? I'm trying to make it so Signal Strength shows 0%-100%, Main Power 0-24V and Temperature showing 30F-120F.
Code:
function createChart() {
Highcharts.stockChart('container', {
alignTicks: false,
rangeSelector: {
selected: 4
},
chart: {
renderTo: 'container',
height: 500,
alignTicks: false
},
yAxis: [{ // Primary yAxis
tickAmount: 8,
tickInterval: 1,
labels: {
format: '{value}°F',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: false
}, { // Secondary yAxis
tickAmount: 8,
tickInterval: 10,
title: {
text: 'Main Power',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} volts',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
tickAmount: 8,
gridLineWidth: 0,
title: {
text: 'Signal Strength',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: [{
name: 'Main Power',
type: 'spline',
yAxis: 1,
data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24],
tooltip: {
valueSuffix: ' V'
}
}, {
name: 'Signal Strength',
type: 'spline',
yAxis: 2,
data: [20, 30, 40, 50, 60, 60, 60, 60, 70, 76, 78, 80],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Temperature',
type: 'spline',
yAxis: 0,
data: [70, 70, 76, 75, 78, 72, 80, 73, 75, 78, 72, 73],
tooltip: {
valueSuffix: ' °F'
}
}]
});
Removed the "percent" in:
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},