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 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'm working with some small size charts in Highcharts, and it seems that due to the size Highcharts is showing labels for only alternating ticks on the x-axis. What I'd like to do to show the label for every tick on the x-axis, even if it means using a smaller font. I haven't been able to figure out how to do this.
I'm loading csv data from a pre HTML block.
Here's the code:
<body>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script> <div id="container"></div>
</body>
<div id="chart_left_1" style="min-width: 200px; max-width: 350px; height: 200px;"></div>
<pre id="gdpgr" style="display:none">year,gdp_yoy,us_gdp_yoy,
2009,1.9000,-2.1000,
2010,7.6000,3.8000,
2011,6.0000,3.7000,
2012,0.9000,4.1000,
2013,-0.1000,3.2000,
2014,5.8000,4.1000,
</pre>
$(function () {
$('#chart_left_1').highcharts({
chart: {
borderColor: '#000080',
borderRadius: 0,
borderWidth: 2
},
title: {text: 'GDP Growth', margin: 0},
exporting: {enabled: false},
legend: {enabled: false},
subtitle: {text: null},
xAxis: {
},
yAxis: {
tickInterval: 2,
title: {text: null},
labels: {
formatter: function() {
return this.value + '%';
}
},
},
tooltip: {
enabled: true,
valueSuffix: '%'
},
data: {
csv: document.getElementById('gdpgr').innerHTML,
startRow: 1,
endRow: 11,
endColumn: 2,
firstRowAsNames: false
},
xAxis: {
allowDecimals: false
},
series: [{
type: 'column',
name: ' GDP growth',
color: '#000080'
},{
type: 'column',
name: 'US GDP Growth',
color: '#CCCCCC'
}]
});
});
And Here's a jsFiddle: https://jsfiddle.net/otfq0dch/1/
In this case, if you dont need to use other type of xAxis than category, you can use step label's property.
xAxis: {
type: 'category',
allowDecimals: false,
labels: {
step: 1
}
},
Example: https://jsfiddle.net/otfq0dch/3/
http://api.highcharts.com/highcharts/xAxis.labels.step
the xAxis is defined twice, i consolidate and added a new option called tickInterval which is set to 1
https://jsfiddle.net/otfq0dch/2/
xAxis: {
allowDecimals: false,
tickInterval: 1
},
link to the docs: http://api.highcharts.com/highcharts/xAxis.tickInterval
xAxis: {
type: 'category',
allowDecimals: true,
labels: {
step: 1
}
},
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 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.