We Keep Coding

How not to round values in apexchart

I need the graph to display the values without rounding, the same as shown in the tooltip

In your chart options dataLabels use the formatter to define the display value, e.g.
dataLabels: {
formatter: function(val) {
return val.toFixed(2);
}
}
Full example with demo chart taken from official docs and added custom label:
var options = {
series: [{
name: 'Marine Sprite',
data: [44, 55, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [53, 32, 33, 52, 13, 43, 32]
}, {
name: 'Tank Picture',
data: [12, 17, 11, 9, 15, 11, 20]
}, {
name: 'Bucket Slope',
data: [9, 7, 5, 8, 6, 9, 4]
}, {
name: 'Reborn Kid',
data: [25, 12, 19, 32, 25, 24, 10]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
stackType: '100%'
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: '100% Stacked Bar'
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
},
dataLabels: {
formatter: function(val) {
return val.toFixed(2);
}
},
tooltip: {
y: {
formatter: function(val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>

Need multiple column high chart between 2 to 3 months [duplicate]

I have created High chart to full fill my requirement as shown in attached Image and i have tried below code in fiddle
example code in fiddle is as follows
https://jsfiddle.net/vsLr07ak/
Below is my code
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'HISTORICAL NEWS SENTIMENT'
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: false
},
min: -100,
max: 100,
tickInterval: 10,
showLastdataLabel: true,
},
xAxis: {
categories: ['26. Nov', '24. Dec', '21. Jan', '18. Feb', '18. March']
},
credits: {
enabled: false
},
series: [{
name: null,
data: [15, 13, 14, 17, 12]
}, {
name: null,
data: [12, -12, -13, 21, 11]
}]
});
Html code is as
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js">.
</script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
but it display 2 bar for per month, I want it show as below attached image.
Can any one help me out?
and I want my chart as shown in image

Instead of category, you should use datetime xAxis type and define x values as timestamps:
series: [{
...,
data: [
[17227780000, 15],
[18523780000, 13],
[19819780000, 14],
[21115780000, 17],
[22411780000, 12],
[23707780000, 12],
[25003780000, -12],
[26299780000, -13],
[27595780000, 21],
[28891780000, 11]
]
}]
Live demo: https://jsfiddle.net/BlackLabel/83us07cx/
or use pointStart and pointInterval properties:
series: [{
pointStart: 17227780000,
pointInterval: 1000 * 60 * 60 * 24 * 15, // 15 days
name: null,
color: 'red',
negativeColor: 'blue',
data: [15, 13, 14, 17, 12, 12, -12, -13, 21, 11]
}]
Live demo: https://jsfiddle.net/BlackLabel/sqtha8xm/
API Reference:
https://api.highcharts.com/highcharts/series.column.data
https://api.highcharts.com/highcharts/series.column.pointStart
https://api.highcharts.com/highcharts/series.column.pointInterval
https://api.highcharts.com/highcharts/series.column.negativeColor

Highcharts how to show certain tooltips and don't show others

I need to show tooltips for only the last two series when hovering the mouse over the graph. In this example the idea will be to show only the tool tips for the values 1699 and 1750. The rest of the values can't show any tooltips when hovering the mouse. How can I achive that? I haven't found any way to do so. Is it possible? Thanks in advance.
(function () {
var categories= ['1350', '1400', '1450', '1500', '1550', '1699', '1750'];
Highcharts.chart('grafica1', {
chart: {
type: 'area',
},
title: {
text: ' '
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
split: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff',
}
}
},
series: [{
name: 'Africa',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'L. America',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Oceania',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'S-E. Asia',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Japan',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'China',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Near East',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Asian CIS',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Russia',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'East Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Central Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'W. Europe - Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'N. America',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="grafica1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

You can use the formatter like this :
tooltip: {
formatter: function() {
if(this.points[0].key < (this.points[0].series.xData.length -2)){
return false;
}
var s = [];
s.push(this.x);
this.points.forEach(function(point) {
s.push('<b>' + point.series.name + '</b>: ' + point.y);
});
return s;
},
split: true
},
Fiddle
Not the cleanest code (there still an error in the console) but it's work.
Edit
Following Deep 3015 comment, code and fiddle updated

You can wrap tooltip.prototype.renderSplit method to show the tooltip only if the points have certain x values.
Highcharts.wrap(Highcharts.Tooltip.prototype, 'renderSplit', function (p, labels, points) {
if (!this.options.showOnLastTwo) {
return p.call(this, labels, points)
}
const point = points[0]
if (point) {
const allowedXs = point.series.xData.slice(-2)
if (allowedXs.includes(point.x)) {
return p.call(this, labels, points)
}
}
this.destroy()
})
And set in tooltip options showOnLastTwo flag to true:
tooltip: {
split: true,
showOnLastTwo: true
},
The flag is not necessary but the wrap changes Highcharts globally so it will affect every chart - the flag will prevent this.
live example: http://jsfiddle.net/sLvekuht/1/

Highcharts: Stacked area drilldown to multiple series

I am trying to present a graph that shows the current progress with an ongoing project. So basically once you open the plot, it will show you a plot of Passed, Failed and not run test runs in a stacked area.
I want to drilldown on the main data (Passed, Failed, Not Run). I want to basically show the teams(s) that may have passed, failed, or not run. Let's say that you want to drill down on "Passed", once you click on "Passed", it should bring multiple series, each serie containing the team name and the amount of Passed tests.
JSfiddle: https://jsfiddle.net/9aqbLzar/3/
Demo:
Highcharts.Tick.prototype.drillable = function() {};
Highcharts.setOptions({
lang: {
drillUpText: '◁ Go back'
}
});
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
type: 'datetime',
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
allowDecimals: false,
title: {
text: "Test runs"
}
},
tooltip: {
shared: false
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: null,
lineWidth: 1,
marker: {
enabled: false,
lineWidth: 1,
lineColor: null,
symbol: 'circle',
radius: 3
}
},
cursor: 'pointer',
trackByArea: true
},
series: [{
name: 'Passed',
data: [{
x: Date.UTC(2017, 09, 06),
y: 20,
drilldown: 'Passed'
}, {
x: Date.UTC(2017, 09, 07),
y: 21,
drilldown: 'Passed'
}, {
x: Date.UTC(2017, 09, 08),
y: 22,
drilldown: 'Passed'
}, {
x: Date.UTC(2017, 09, 09),
y: 23,
drilldown: 'Passed'
}]
},
{
name: 'Failed',
data: [{
x: Date.UTC(2017, 09, 06),
y: 6,
drilldown: 'Failed'
}, {
x: Date.UTC(2017, 09, 07),
y: 5,
drilldown: 'Failed'
}, {
x: Date.UTC(2017, 09, 08),
y: 4,
drilldown: 'Failed'
}, {
x: Date.UTC(2017, 09, 09),
y: 3,
drilldown: 'Failed'
}]
},
{
name: 'Not run',
data: [{
x: Date.UTC(2017, 09, 06),
y: 8,
drilldown: 'Not run'
}, {
x: Date.UTC(2017, 09, 07),
y: 7,
drilldown: 'Not run'
}, {
x: Date.UTC(2017, 09, 08),
y: 6,
drilldown: 'Not run'
}, {
x: Date.UTC(2017, 09, 09),
y: 5,
drilldown: 'Not run'
}]
}
],
drilldown: {
series: [{
id: 'Passed',
data: [{
x: Date.UTC(2017, 09, 11),
y: 1
}, {
x: Date.UTC(2017, 09, 12),
y: 2
}, {
x: Date.UTC(2017, 09, 13),
y: 3
}, {
x: Date.UTC(2017, 10, 14),
y: 5
}]
}, {
id: 'Failed',
data: [{
x: Date.UTC(2017, 09, 09),
y: 5
}, {
x: Date.UTC(2017, 09, 10),
y: 6
}, {
x: Date.UTC(2017, 09, 11),
y: 7
}, {
x: Date.UTC(2017, 10, 12),
y: 8
}, {
x: Date.UTC(2017, 10, 13),
y: 9
}]
}, {
id: 'Not run',
data: [{
x: Date.UTC(2017, 09, 09),
y: 5
}, {
x: Date.UTC(2017, 09, 10),
y: 6
}, {
x: Date.UTC(2017, 09, 11),
y: 7
}, {
x: Date.UTC(2017, 10, 12),
y: 8
}, {
x: Date.UTC(2017, 10, 13),
y: 9
}]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

First of all, you need to have multiple drilldown series for each series (e.g. three for the 'Passed', three for the 'Failed', three for the 'Not run'). Secondly, the only way to drilldown to more than one series is to add them on drilldown event with a function called addSingleSeriesAsDrilldown. When desired series are added all you need to do is to apply them with applyDrilldown function. Take a look at the example below and in case of any question, feel free to ask.
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
Example:
https://jsfiddle.net/7a6gh7vz/

Highchart - Area chart: customize tooltip

I am trying to customize the tooltip of area chart. I am using Highchart for this.
I am plotting 3 series in area chart. My requirement is to show tooltip at fixed location in chart which is top center. Now, when i put cursor at any point then tooltip should show all series name and their current value where the cursor is. Refer below image:
Currently i am able to show tooltip on top - center and putting mouse at any point is showing current series name and data but it is showing current series name in all 3 places.
Highchart option:
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'ACCUMULATED WEALTH'
},
xAxis: {
categories: [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],
tickmarkPlacement: 'on',
crosshair: {
width: 1,
color: "#ccc"
},
title: {
enabled: false
}
},
yAxis: {
title: {
text: false
},
opposite: true,
labels: {
formatter: function() {
return '$' + this.value + 'k';
}
},
},
tooltip: {
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
useHTML: true,
shared: true,
padding: 0,
split: false,
headerFormat: "",
pointFormat: '<table><tr><td>{point.y}</td><td>{point.y}</td><td>{point.y}</td></tr>' +
'<tr><td>{series.name}</td><td>{series.name}</td><td>{series.name}</td></tr></table>',
footerFormat: "",
positioner: function () {
return { x: 250, y: 25 };
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Cash Flow',
data: [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]
}, {
name: 'Appreciation',
data: [ 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, 31]
}, {
name: 'Principal',
data: [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, 32, 33]
}]
});
Here is what i have tries so far:
https://jsfiddle.net/2pdossk7/13/
Please help. Thanks in advance!

It might be difficult to achieve the desired result without tooltip.formatter.
This is how you can build tooltip text in a formatter:
formatter: function(tooltip) {
const points = this.points;
let str = '<table><tr>';
points.forEach(point => {
str += '<td style="text-align:center">' + point.y + '</td>';
});
str += '</tr><tr>';
points.forEach(point => {
str += '<td><span style="font-size:20px;color:' + point.color + '">●</span> ' + point.series.name + '</td>';
});
str += '</tr></table>';
return str;
},
And position it in the center of the chart:
positioner: function () {
const chart = this.chart;
return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop + 10 };
}
Example and output
https://jsfiddle.net/eb3ou25v/

You can achieve desired result using pointFormat method
This is how you can use this
pointFormat: '<table style="text-align:center; display: inline-block; background: white;"><tr><td>{point.y}</td></tr>' +
'<tr><td><span style="font-size:20px;color:{series.color}">●</span> {series.name}</td></tr></table>',
positioner: function () {
const chart = this.chart;
return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop - 20 };
}
for jsfiddle example click here