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>
Can someone please take a look at my jsFiddle example and let me know why the colors on the heatmap chart don’t appear to scale with the values? There is some significant variation that I would expect to propagate into the chart.
Also, how can I adjust the tooltip so that the values for x,y are formatted in the same way as the axis values?
https://jsfiddle.net/samwhite/uadrecjg/
var data1 = Papa.parse(document.getElementById('data1').innerHTML);
var data2 = Papa.parse(document.getElementById('data2').innerHTML);
function convertDataFromCsv(data) {
var convData = [];
data.forEach(function(elem) {
convData.push({
x: parseFloat(elem[0]),
y: parseFloat(elem[1]),
z: parseInt(elem[2])
});
});
return convData;
}
Highcharts.chart('heatmap_container', {
chart: {
type: 'heatmap'
},
xAxis: {
labels: {
formatter: function() {
let seconds = this.value * 5;
let t = new Date(1900, 1, 1, 9, 30, 0);
t.setSeconds(t.getSeconds() + this.value * 5);
return `${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`
}
},
tickInterval: 2
},
yAxis: {
labels: {
formatter: function() {
return `${this.value/100}`;
}
}
},
legend: {
align: 'right',
margin: 0,
verticalAlign: 'middle',
symbolHeight: 300
},
colorAxis: [{
type: 'logarithmic',
reversed: false,
layout: 'vertical',
maxColor: '#d52120',
minColor: '#ffffff',
min: 1,
max: 100000,
}, {
type: 'logarithmic',
reversed: false,
layout: 'vertical',
maxColor: '#1d843d',
minColor: '#ffffff',
min: 1,
max: 100000,
}],
series: [{
nullColor: '#EFEFEF',
color:'#d52120',
data: convertDataFromCsv(data1.data),
turboThreshold: Number.MAX_VALUE
}, {
nullColor: '#EFEFEF',
color:'#1d843d',
data: convertDataFromCsv(data2.data),
turboThreshold: Number.MAX_VALUE
}, {
colorAxis: 1
}]
});
Current colors:
For example, I see the same red and green colors.
Desired colors:
The color green and red should go from light to dark to scale with the values as seen below
UPDATE:
This is how the chart looks like when importing the data from CSV files using the z value:
https://jsfiddle.net/samwhite/4w8r7chn/1/
Use value instead of z property:
function convertDataFromCsv(data) {
var convData = [];
data.forEach(function(elem) {
convData.push({
x: parseFloat(elem[0]),
y: parseFloat(elem[1]),
value: parseInt(elem[2])
});
});
return convData;
}
Live demo: https://jsfiddle.net/BlackLabel/rcaetjbw/
API Reference: https://api.highcharts.com/highcharts/series.heatmap.data
is there any way to set specific size of PolarLine Chart (not the ChartArea, the chart)
In the image it can be seen the "space reserver to I don't know what"
So there is two options, determine the size of Chart, or equalize the size of chart to the ChartArea.
$("#chart2").kendoChart({
chartArea: {
background:"",
border: {
width: 2,
color: "green"
}
},
legend:{
visible: false
},
seriesDefaults: {
type: "polarLine",
style: "smooth"
},
series: [{
data: [
[0,75.07200602],[10,81.64361286],
[20,91.39178047],[30,98.75515111],
[40,99.92040115],[50,92.10607453],
[60,74.91674346],[70,50.02020242],
[80,11.87856731],[90,0.998505703]
]
}],
xAxis:
{
startAngle: 90,
majorUnit: 10,
reverse :true,
majorGridLines: {
max: 360,
min: 0,
visible: true
},
labels:
{
visible: false,
margin:3,
template:"#: value # º"
}
},
yAxis:
{
max: 100,
min :0,
majorUnit: 10,
labels:
{
visible: false
}
},
tooltip: {
visible: true,
format: "{0}",
template: "#: value #"
},
transitions:false
});
White space problem
The solution was creating a function that rezise chart once is calculated depending the cointainer size, in my case was:
function reziseChart(ParentDiv)
{
var clientHeight = document.getElementById(ParentDiv).clientHeight;
var c = $("#chart2").data("kendoChart");
c.options.chartArea.margin = - clientHeight * 0.425;
c.refresh();
}
I have a requirement to display completion percentage on a bar chart with the start date for each of those project as line chart.
Now, for achieving this I have created a chart with dual y-axis.
1 - axis-1 shows progress with bar-chart. With max: 100 - avoid displaying values > 100.
2 - axis-2 shows start dates with a line chart
With this set up, I expect the bar to go all the way to the end when value is 100 and the secondary axis to adjust with in it. Instead the bar stops at about 3/4 of the way and line chart actually plots point beyond bar chart's 100%.
Following jsfiddle would display the prominently.
var completionChart = $('#Chart').highcharts({
title: {
text: 'Project QUAL Status - SD/uSD'
},
xAxis: {
categories: window.xCategories,
crosshair: true
},
yAxis: [{
title: {
text: '% Completion'
},
min: 0,
max: 100,
labels: {
enabled: false
},
gridLineWidth: 0
}, {
"title": {
"text": "Start Date"
},
type: 'datetime',
opposite: true
}],
tooltip: {
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 10,
borderWidth: 1,
borderColor: '#000000',
useHTML: true,
positioner: function () {
return { y: 317 };
},
shared: false,
style: {
padding: 5
}
},
plotOptions: {
bar: {
groupPadding: 0
},
series: {
dataLabels: {
enabled: true,
align: 'left',
overflow: 'none',
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function () {
if (this.y <= 100)
return Math.round(this.y) + '%';
}
},
cursor: 'pointer'
}
},
credits: {
enabled: false
},
series: [{
index: 0,
name: 'Completion %',
data: completionpercent,
showInLegend: false,
type: 'bar'
}, {
data: startDate,
type: 'spline',
name: 'Start Date',
connectNulls: true,
color: '#2F4367',
lineWidth: 3,
yAxis: 1,
index: 1,
}]
});
The width of the chart is set and I can not change it without affecting the overall design of the application. Changing the width does help sometimes, but I want a solution that does not depend on the chart width to work.
You need to set the alignTicks property to false in order to achieve this.
Updated fiddle:
https://jsfiddle.net/jlbriggs/mup6vL8d/2/
Reference:
http://api.highcharts.com/highcharts/chart.alignTicks
I have the attached chart output.
How can I put the name of the axis exactly on the axis instead of positioning it between the axis (ie: N, E, S, W).
The JS code is given below:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container2',
polar: true,
type: 'column'
},
title: {
text: '24-Hours Wind Speed and Direction Chart'
},
pane: {
startAngle: 0,
endAngle: 360,
size: '85%'
},
legend: {
reversed: true,
enabled: false,
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
xAxis: {
type: "",
categories: sorted_names,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0,
endOnTick: true,
showLastLabel: false
},
plotOptions: {
series: {
// pointStart: 0,
// pointInterval: 90
// pointPlacement: 'between'
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: series
});
Is there anyone who can help me to fix this. Thanks in advance.
I believe you are looking for a combination of the tickMarkPlacement option and the pointPlacement option.
xAxis: {
tickmarkPlacement: 'on', // add this!
type: "",
categories: sorted_names,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
And in the plot options:
plotOptions: {
series: {
pointPlacement: 'on' // add this !
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
Here's a fiddle demonstration.