Related
I created the same apexchart with 2 different datasets. Chart 1 looks great with horizontal lines. But chart 2 has just 1 horizontal line.
The only difference between chart 1 and chart 2 is the dataset. How can I always display 5 horizontal lines across the chart?
Chart 1: https://codepen.io/dedefeefdef/pen/GRrzoNj
Dataset 1:
[[1619173193036,49407.535435718644],[1619176091510,49549.26563563993],[1619179037350,50138.28330288627],[1619182201670,49797.38039516057],[1619185113178,49034.01097606104],[1619188127394,49524.184512772634],[1619191189295,49576.50939492852],[1619194162163,50205.73169158809],[1619197144978,50073.48029019594],[1619200103693,50115.77589945983],[1619203154512,50596.642200351744],[1619206164399,50777.75836621535],[1619209161605,51428.66818308527],[1619212172077,50846.83181180289],[1619215102695,50443.96733946523],[1619218180736,50740.97575842062],[1619221165616,50847.88134692881],[1619224199653,50448.69953560474],[1619227160254,49943.27825537499],[1619230041721,49712.238215643156],[1619233139782,50144.43808207704],[1619236181862,50468.26366127149],[1619239136429,50360.42255156926],[1619242087409,50377.45754274844],[1619245135556,50531.35036881819],[1619248237594,50062.40313986315],[1619251214964,49907.96886371824],[1619254186363,50141.20384968558],[1619259102000,49412.67996377031]]
Chart 2 : https://codepen.io/dedefeefdef/pen/VwPgeKL
Dataset 2:
[[1619173150399,1.0940878381417847],[1619176129124,1.1070033240375783],[1619179360960,1.1335610023715914],[1619182375797,1.0987262566796245],[1619185499396,1.0694830118537217],[1619188437886,1.1112241146594293],[1619191471163,1.0877301924115799],[1619194426800,1.1078699893603736],[1619197429216,1.1017656067359929],[1619200387208,1.0989519988768361],[1619203420737,1.1129932263760143],[1619206362548,1.11105234071539],[1619209395648,1.1440514951415397],[1619212482497,1.1314118311313806],[1619215435039,1.1124574692062728],[1619218357604,1.1229133868529708],[1619221458977,1.1517979836016765],[1619224442891,1.1252054746610685],[1619227453005,1.1180402148239843],[1619230457650,1.1053157940491964],[1619233312657,1.1298614827999067],[1619236396985,1.1397639443740273],[1619239424178,1.1359274669865476],[1619242469061,1.140215819313516],[1619245387650,1.144685119290531],[1619248338390,1.1276405657214676],[1619251357302,1.1279390040404729],[1619254396800,1.1362663708234912],[1619259112000,1.1049392779824312]]
It is showing on both charts, only that on the second it is only showing one. This is because the tick amount of the y-axis is calculated automatically depending on the data, but you can set it using tickAmount:
yaxis: {
tickAmount: 5
}
let InfoinfoDisplay_color = "rgba(1, 100, 148, 0.95)";
let InfoHovercolor = "rgba(1, 100, 148, 0.95)";
var chartData = [
[1619172418188, 1.0476013869111795],
[1619175587292, 1.1198232589571675],
[1619178853930, 1.157646111247407],
[1619181915314, 1.1093982047739799],
[1619184749901, 1.0798464813053623],
[1619187818296, 1.1086855020268924],
[1619190782881, 1.096000360488148],
[1619193860463, 1.10672232619161],
[1619196767038, 1.0988803848560535],
[1619199743916, 1.0981656379540496],
[1619202862866, 1.093804129207881],
[1619205891702, 1.1077756492342723],
[1619208843234, 1.1481203368627158],
[1619211742488, 1.1172375471919378],
[1619214829414, 1.110618846651946],
[1619217810168, 1.1233988199629148],
[1619220788002, 1.1413939139175715],
[1619223899525, 1.1399773736160672],
[1619226882428, 1.1191436618449704],
[1619229755380, 1.12186472542115],
[1619232856982, 1.128074522521124],
[1619235801347, 1.1467409723241526],
[1619238745617, 1.1333216765168754],
[1619241860850, 1.141486724409456],
[1619244733747, 1.1459909043812324],
[1619247714927, 1.1413474565269073],
[1619250869567, 1.127054245243459],
[1619253888057, 1.1406556175192146],
[1619258468000, 1.1208390731103737]
];
var chartDisplay = new ApexCharts(document.querySelector("#coinDetailChart"), {
chart: {
type: 'area',
stacked: false,
height: 350,
zoom: {
type: 'x',
enabled: true,
autoScaleYaxis: true
},
toolbar: {
autoSelected: 'zoom'
},
},
dataLabels: {
enabled: false
},
markers: {
size: 0,
},
title: {
text: '<%=data[0].name%> Price Movement',
align: 'left',
style: {
color: 'white'
},
},
series: [{
name: "$ ",
data: chartData
}],
colors: [InfoinfoDisplay_color],
opacity: 1,
type: 'solid',
fill: {
colors: [InfoinfoDisplay_color],
type: 'gradient',
gradient: {
type: "vertical",
opacityFrom: 1,
opacityTo: 1,
gradientToColors: [InfoHovercolor],
stops: [25, 100]
}
},
yaxis: {
labels: {
style: {
colors: 'white',
},
show: true,
offsetX: 0,
offsetY: 0,
rotate: 0,
formatter: function(val) {
return (val.toFixed(3));
},
},
tickAmount: 5
},
xaxis: {
type: 'datetime',
crosshairs: {
width: 1
},
labels: {
style: {
colors: 'white',
},
},
},
});
chartDisplay.render();
* {
background: black
}
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="coinDetailChart"></div>
</body>
I have a highchart heatmap with categories. Since there are numerous categories the map looks crowded. Even though I enabled y-axis scrolling the pixel per category is too less and the map is practically un-usable.
Could someone please tell me how to scale the y-axis so that each category gets a definite height and is properly visible ?
https://jsfiddle.net/Lxw7gtas/
Highcharts.chart('container', {
data: {
rows: [["Sun, 07 Nov 2010 00:00:00 GMT", 0.0, 0],...],
seriesMapping: [{x: 0, value: 1, y: 2}]
},
chart: {
type: 'heatmap'
},
title: {
text: null
},
navigator: {
enabled: true
},
rangeSelector: {
enabled: true
},
boost: {
useGPUTranslations: true
},
xAxis: {
type: 'datetime',
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: null
},
labels: {
},
type: 'category',
categories: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
scrollbar: {
enabled: true
},
tickInterval: 1,
tickPixelInterval: 100,
legend: {
align: 'center',
layout: 'horizontal',
margin: 0,
verticalAlign: 'top',
floating: true,
/* y: 25, */
/* symbolHeight: 280 */
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a'],
[1, '#c4463a']
],
labels: {
format: '{value}'
}
},
series: [{
boostThreshold: 100,
borderWidth: 10,
nullColor: '#EFEFEF',
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}],
plotOptions: {
series: {
dataLabels: {
overflow: 'none',
crop: true,
}
}
}
}});
Please see the picture
I want to increase spacing between categories
I want to minify the chart Interface. Currently I am using chart with size 600 x 300 px, which is working fine.
Now I want to show 3 charts at the same place so in order to save space. I want to show 3 charts thumbnails (working charts). If user click on any chart it should appear as full chart. I can show it on the popup or expand it on the page itself.
I checked the Highchart website. It provide option to resize chart using height & width properties.
http://api.highcharts.com/highcharts/chart.height
http://api.highcharts.com/highcharts/chart.width
This option do not actually resize the chart. Char layout get smaller but the title label stay at the same size. I want chart to resize and work in a smaller version with text and chart show in smaller box like 100 x 100 px.
I can use chart.setSize(); function to resize the chart.
Does it make any sense? Please guide me.
I am using highcharts 5.0 version js file.
Here is my code:
var seriesData1 = {
name: "Series1Label",
data: Series1Data
},
seriesData2 = {
"name": "Series2Label",
"data": Series2Data
},
seriesData3 = {
"name": "Series3Label",
"data": Series3Data
},
completedData = [seriesData2, seriesData3, seriesData1];
var elem = par.find('<some class>');
elem.highcharts({
chart: {
type: 'areaspline'
},
colors: ['#21d0b8', '#2248B5', '#5B82A1'],
title: {
text: ""
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
useHTML: true,
itemDistance: 5,
},
xAxis: {
'title': {
text: xAxisTitle
},
categories: categories,
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
shared: true
},
credits: {
enabled: false
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
}
}
},
areaspline: {
fillOpacity: 0.8
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: completedData,
exporting: {
buttons: {
contextButton: {
text: 'Export',
useHTML: true,
align: 'right',
symbolY: 15,
}
}
},
responsive: {
rules: [{
condition: {
maxWidth: 100
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled:false,
},
title: {
text: null
}
},
xAxis: {
labels: {
enabled:false,
},
title: {
text: null
}
},
title:{
text: '',
},
subtitle: {
text: null
},
tooltip:{
enabled:false,
},
legend:{
enabled:false,
},
credits: {
enabled: false
}
}
}]
}
});
The 'elem' chart element occurs 7 times on a single page, so I have made a single code to fill all the charts on different data and trigger them all at single function.
I need all the 7 charts to show in thumbnail and show certain chart in large size on user click.
using your example when I update my code.
var getChart = ele_.highcharts({.....});
Resize code:
getChart.setSize(100, 100);
Error encountered
getChart.setSize is not a function
Can anyone guide me how to fix this issue?
check responsive and set rules accordingly.
For 100 by 100 you should remove all gridlines, credits, labels, title
Example will be
Highcharts.chart('container', {
chart: {
type: 'line',
width: 100,
height: 100
},
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false,
},
title: {
text: null
}
},
xAxis: {
labels: {
enabled: false,
},
title: {
text: null
}
},
title: {
useHTML: true,
text: ''
},
subtitle: {
text: null
},
tooltip: {
enabled: false,
},
legend: {
enabled: false,
},
credits: {
enabled: false
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
$('#container').highcharts().renderer.text('mini Highcharts', 20, 90)
.css({
fontSize: '8px',
color: '#7d7d7d'
})
.add();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
check this using chart.setSize();
Fiddle
Update
You could use $(elem).highcharts().setSize(100, 100);
Updated fiddle
I have a Highchart in my web application. In the browser it displays normally which is as follows:
But when I export the chart it flips the axis and I end up with the following image:
Following are the options I am using for my Highchart.
var options = ({
chart: {
renderTo: 'chartDiv'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7200 * 10000,
allowDecimals:false,
labels: {
format: '{value}',
rotation: 30,
align: 'left',
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'No. of rings'
},
min: 0
},
{ // Secondary yAxis
gridLineWidth: 0,
min: 0,
title: {
text: 'Accumulative Rings',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} Ring',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
}
],
tooltip: {
shared: true
},
legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
plotOptions: {
spline: {
marker: {
enabled: false
},
}
}
});
I have three series in my chart, the bar chart can have 0 values.
The data is coming from an ajax service, which I put in an array and then add to chart as follows:
chart.addSeries({
type: 'bar',
name: 'Rings per day ',
data: barData,
pointInterval: mainInterval
});
chart.addSeries({
type: 'spline',
name: 'Accumilative rings ',
data: spline1Data,
yAxis: 1,
});
chart.addSeries({
type: 'spline',
name: 'Planned Progress ',
data: spline2Data,
yAxis: 1,
color: "#FF0000"
});
What's wrong with my chart?
bar series is the key part. bar series forces chart to be rendered flipped. In your case use column. It displays differently on your browser because, most probably, you have an old version of Highcharts.
I'm stuck at MACD plotting in highchart.
I don't understand where I'm doing wrong. Please follow jsfiddle link and try to solve and plotting graph for MACD only.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: [{ // Primary yAxis for volume
title: {
text: 'volume',
style: {
color: 'blue'
}
},
height: '60%',
},{ // Secondary yAxis for Return
height: '60%',
opposite: true
},{
labels: {
align: 'left',
x: -3
},
title: {
text: 'MACD'
},
top: '65%',
height: '35%',
opposite: true
}],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [ { color: "blue",
data: [0.06694678963061322,0.22184874961635637,1,1.031408464251624,0.6989700043360187,1e-7,0.47712125471966244,1e-7,0.17609125905568124,0.6989700043360187,1e-7,1e-7,1e-7,0.47712125471966244,1e-7,0.47712125471966244,0.0791812460476248],
id: "left_bar",
name: "Sentiment",
type: "column",
},{
color: "#F09413",
data: [50,49.805,50.024142,51.9900907806,54.0333013483,56.1568100913,58.3637727279,60.5991052233,62.7140139956,65.2100317526,68.5422643752,72.0447740848,75.7262620405,80.3758545298,85.3109319979,89.457043293,3.9835696837],
id: "right_bar",
name: "Price",
type: "line",
yAxis: 1
},{
algorithm: "MACD",
linkedTo: "right_bar",
name: "MACD",
showInLegend: true,
type: "trendline",
yAxis: 1
}
]
});
});
Accoring to the code: https://rawgit.com/laff/technical-indicators/master/technical-indicators.src.js it looks like periods are hardcoded, so it is a reason why your macd is not calculated. You you no enough points.