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>
Related
I am trying to get both lines on my chart to scale correctly, I have read through the documentation but can't seem to find how to do this.
images
The above image shows what happens to the orange line when a secondary axis is added. It's like they are using the same scale rather than their own.
I currently have the below code:
$(function(e) {
/*-----echart1-----*/
var options = {
chart: {
height: 300,
type: "line",
stacked: false,
toolbar: {
enabled: false
},
dropShadow: {
enabled: true,
opacity: 0.1,
},
},
colors: ["#f99433", '#6759C8'],
dataLabels: {
enabled: false
},
stroke: {
curve: "straight",
width: [3, 3, 0],
dashArray: [0, 4],
lineCap: "round"
},
grid: {
padding: {
left: 0,
right: 0
},
strokeDashArray: 3
},
markers: {
size: 0,
hover: {
size: 0
}
},
series: [{
name: "Price",
type: 'line',
data: ["4.12","4.08","3.98","3.99","3.95","4.01"] }, {
name: "Socials",
type: 'line',
data: ["23","17","6","6","7","7"] }],
yaxis: [
{
title: {
text: "Price",
},
},
{
opposite: true,
title: {
text: "Socials"
}
}
],
xaxis: {
type: "month",
categories: ["2021-12-09 17:01:25","2021-12-09 18:01:29","2021-12-09 19:01:33","2021-12-09 20:01:37","2021-12-09 21:01:42","2021-12-09 22:01:45"],
axisBorder: {
show: false,
color: 'rgba(119, 119, 142, 0.08)',
},
labels: {
style: {
color: '#8492a6',
fontSize: '12px',
},
},
},
fill: {
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55
}
},
tooltip: {
show:false
},
legend: {
position: "top",
show:true
}
}
var chart = new ApexCharts(document.querySelector("#chartArea"), options);
chart.render();
I want to show my categories on the top of each bar chart. like the image.
for this i set bar-chart option as below without any xAxis categories label.
options: {
title: null,
chart: {
type: 'bar'
},
colors: ['#9696b2', '#ff058d'],
xAxis: {
categories: ['Tokyo', 'Fukuoka', 'Hiroshima', 'Osaka', 'Nagoya'],
visible: false,
},
yAxis: {
visible: false,
},
tooltip: {
valueSuffix: ' '
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Compliant',
data: [1300, 1121, 1700, 1121, 700]
}, {
name: 'Non-Compliant',
data: [60, 30, 50, 20, 0]
}]
}
how can i make this one with stacked horizontal bars?
You can align labels to left and position them by x and y properties:
xAxis: {
...,
lineWidth: 0,
labels: {
align: 'left',
x: 0,
y: -24
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4767/
API Reference: https://api.highcharts.com/gantt/xAxis.labels
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 am trying to add a legend to a 3d graph using highchart but i am unable to do that..How can i achieve that ?
Below is the jsfiddle code
jsfiddle
Below is the code i added for legend but its not working...
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter3d',
animation: false,
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 150,
viewDistance: 5,
}
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
categories: snr,
title: {
text: null
},
labels: {
format: '{value:.2f}'
}
},
xAxis: {
type: 'category',
categories: mac,
title: {
text: null
}
},
zAxis: {
// categories: count,
min: 0,
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25
},
legend :{
enabled : false
},
series: [{
name: 'Reading',
colorByPoint: true,
});
Please guide me to display the legend in the 3d graph...
Base chart:
type: 'area',
https://jsfiddle.net/q3x9psdz/19/
But when cross value is to big for curent chart - yAxis is expanding:
plotOptions: {
series: {
threshold: 20,
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 50,
crosshair: true,
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
},
{
value: 20,
color: 'coral',
dashStyle: 'shortdash',
width: 2,
}
]}
https://jsfiddle.net/q3x9psdz/14/
Workaround is to use spline or line:
series: [{
type: 'spline',
name: 'Chart',
data: [[1523195126000,1],[1523195426000,3],[1523195726000,1],[1523196026000,2],[1523196326000,6],[1523196626000,5],[1523196926000,2],[1523197226000,3],[1523197526000,1]],
negativeColor: true,
color: '#FF4040',
shadow: true
}]
https://jsfiddle.net/q3x9psdz/23/
But on cros no area color:
plotOptions: {
series: {
threshold: 2.5,
}
},
https://jsfiddle.net/q3x9psdz/21/
Any solution to have color fille area and not expanding yAxis?
Set series.softThreshold to true.
plotOptions: {
series: {
threshold: 20,
softThreshold: true
}
},
live example: https://jsfiddle.net/j58bvw36/