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>

Highcharts, How to remove gaps on x coordinates

For a Highcharts spline type chart, I want to completely remove the left and right spaces.
I tried to change some options but there is no success.
Spacing and margin keys did not make any appearance changes.
Does anyone have any info on how to remove the spaces, all help is welcome.
Example chart
Highcharts.chart('container', {
title: {
text: ''
},
chart: {
type: 'spline',
},
legend: {
display: false
},
xAxis: {
categories: [7, 13, 16, 18, 19, 20, 29, 22, 25, 38, 23, 26, 28, 29, 33],
},
yAxis: {
tickPosition: 'inside',
min: 0,
title: {
text: null
},
floor: 0,
tickWidth: 1
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>

These gaps are added when using the xAxis.categories option. If you remove these options then it works the way you want. For tick positioning in this case it is better to set other available API options. Find out more about it here: https://api.highcharts.com/highcharts/xAxis.tickPositions

Remove space on bar ZingChart

I'm making a chart here and I have a little problem with removing the distance between the boxes
var myConfig = {
type: 'bar',
legend: {
layout: "x4",
overflow : "page",
shadow : false,
align : "left",
alpha :0.05,
"adjust-layout": true,
marker : {
type : "circle",
size : "7px",
"border-color" :"none"
}
},
scaleX: {
// convert text on scale indices
labels: ['Automotive', 'Retail', 'Wholesale']
},
plot: {
barWidth:"50%",
animation: {
effect: 'ANIMATION_EXPAND_BOTTOM',
method: 'ANIMATION_STRONG_EASE_OUT',
sequence: 'ANIMATION_BY_NODE',
speed: 275,
}
},
series: [
{
// plot 1 values, linear data
values: [23, 20, 27],
text: 'Sum of target Premi',
backgroundColor: '#fa6383',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [35, 42, 33],
text: 'Sum of premi Leads',
backgroundColor: '#fb9f40',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [15, 22, 13],
text: 'Sum of premi Activity',
backgroundColor: '#fdcd55',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [15, 22, 13],
text: 'Sum of premi Booking',
backgroundColor: '#4bc0c1',
borderRadius: 5,
}
]
};
for my settings like this. there are suggestions so there can be no space ?
i have try documentation but does not work.
https://www.zingchart.com/docs/chart-types/bar

I'm not sure that I correctly understood your problem but probably you can try to use "barsOverlap" in "plot" configuration to achieve the desired result.
var myConfig = {
type: 'bar',
legend: {
layout: "x4",
overflow : "page",
shadow : false,
align : "left",
alpha :0.05,
"adjust-layout": true,
marker : {
type : "circle",
size : "7px",
"border-color" :"none"
}
},
scaleX: {
// convert text on scale indices
labels: ['Automotive', 'Retail', 'Wholesale']
},
plot: {
barWidth:"50%",
barsOverlap: '50%',
animation: {
effect: 'ANIMATION_EXPAND_BOTTOM',
method: 'ANIMATION_STRONG_EASE_OUT',
sequence: 'ANIMATION_BY_NODE',
speed: 275,
}
},
series: [
{
// plot 1 values, linear data
values: [23, 20, 27],
text: 'Sum of target Premi',
backgroundColor: '#fa6383',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [35, 42, 33],
text: 'Sum of premi Leads',
backgroundColor: '#fb9f40',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [15, 22, 13],
text: 'Sum of premi Activity',
backgroundColor: '#fdcd55',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [15, 22, 13],
text: 'Sum of premi Booking',
backgroundColor: '#4bc0c1',
borderRadius: 5,
}
]
};

Highchart heatmap plot x-axis on time and y-axis on string

Actually, I was trying to create a heatmap which will show each task time taken to execute in a heatmap.
So basically x-axis will have time in datetime format.y-axis will have each task name and every point will have value which is the time taken to execute the task.
In simple i have formatted my json where data is coming in format
[{datetime,stage name,value}]
So my xCategory will look like
xCategory=[1527657415000,..some datetime]
my yCategory is
yCategories=["Stage"...]
and series.data=[[0,0,12],[0,1,12]..]
My chart
var chart = new Highcharts.Chart('chart', {
chart: {
type: 'heatmap'
},
xAxis: {
// categories: xCategories,
type: 'datetime',
dateTimeLabelFormats:
{
month: '%e. %b',
year: '%b'
},
},
yAxis: {
// categories: yCategories
},
plotOptions: {
series: {
colorByPoint: true
}
},
series: series
});
But it is not coming up properly.

In heatmap chart type each point occupies the same space, so value data can be only represented by color or by label. If you use datetime xAxis type, you must remember to set right colsize property.
Highcharts.chart('container', {
chart: {
type: 'heatmap',
plotBorderWidth: 1
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
colsize: 60 * 60 * 1000,
data: [
[1527657415000, 0, 10],
[1527657415000, 1, 19],
[1527657415000, 2, 8],
[1527657415000, 3, 24],
[1527657415000, 4, 67],
[1527661015000, 0, 92],
[1527661015000, 1, 58],
[1527661015000, 2, 78],
[1527661015000, 3, 117],
[1527661015000, 4, 48],
[1527661015000, 0, 35],
[1527661015000, 1, 15],
[1527661015000, 2, 123],
[1527661015000, 3, 64],
[1527661015000, 4, 52],
[1527664615000, 0, 72],
[1527664615000, 1, 132],
[1527664615000, 2, 114],
[1527664615000, 3, 19],
[1527664615000, 4, 16]
],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
Live demo: https://jsfiddle.net/BlackLabel/zhxyerd1/
API: https://api.highcharts.com/highcharts/series.heatmap.colsize

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/