We Keep Coding

How to make ECharts text and legend area options responsive to different screen sizes?

In this case I'm using ECharts for react library to visualize data using a pie chart. When the screen size increases the graph text will remain as the same size. canvas size is changing but the other texts are not changing.
So, I want to make those text and legend area responsive when the screen size is increasing.
const optionPieChart = { color: [ '#2B6AA9', '#2845AB', '#F8FAFF', '#4EBDDE' ], title: { text: 'Conversation Type', left: 'left', top: '10%', padding: 15, textStyle: { color: '#ffffff', opacity: '0.7', fontWeight: '400', fontFamily: 'poppins', fontSize: '18px' } }, tooltip: { trigger: 'item' }, legend: { itemGap: 10, show: true, padding: 15, orient: 'vertical', left: 'left', top: '50%', itemWidth: 15, textStyle: { color: '#C4D8FF', fontFamily: 'poppins', fontSize: '14px' } }, series: [ { // name: 'Access From', type: 'pie', radius: '80%', padding: '0', left: '160', data: [ { value: 1048, name: 'FAQs' }, { value: 735, name: 'Small Talks' }, { value: 580, name: 'Product inquiries' }, { value: 484, name: 'Escalate Hop' }, ], label: { show: false }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ], backgroundColor: { type: 'radial', x: 0.3, y: 0.3, r: 0.8, colorStops: [ { offset: 0, color: '#122C44' }, { offset: 1, color: '#133351' } ] }, };
I tried some media quaries but didn't work.

You can do this with window.onresize event
var chartEl = echarts.init(document.getElementById('someId'));
var option = {
... // chart options
};
chartEl.setOption(option);
window.onresize = function () {
var width = document.getElementById('someId').offsetWidth;
var fontSize = width / 80 + 'px';
var legendWidth = width / 4 + 'px';
chartEl.setOption({
textStyle: {
fontSize: fontSize
}
});
chartEl.setOption({
legend: {
width: legendWidth
}
});
};

Adding scrollbar to a custom series type in Echarts

I have create a custom series type to display the labels in Y Axis. When the label is large, then text is overlapping the main grid. I need to clip that overlapping text and also need to provide a scrollbar to display the remaining text. See the below image for better understanding of my question.
options = {
.......
grid: {
height: 250
},
yAxis: {
axisTick: { show: false },
splitLine: { show: false },
axisLine: { show: false },
axisLabel: { show: false },
min: 0,
max: this.labelData.length + 1,
},
series: [{
type: 'custom', // This is for rendering the main content (Gantt Chart)
renderItem: this.renderGanttItemClosure(),
itemStyle: {
opacity: 0.8
},
encode: {
x: [1, 2],
y: 0,
},
data: this.data
},
{
type: 'custom', // This is for rendering the label
renderItem: this.renderAxisLabelItem,
itemStyle: {
opacity: 0.8
},
encode: {
x: -1,
y: 0,
},
data: this.labelData,
}]
};
function renderAxisLabelItem(params: any, api: any) {
var categoryLevel = api.value(0);
var start = api.coord([0, categoryLevel]);
var barHeight = api.size([0, 1])[1] * 0.6;
var y = start[1];
if (y < params.coordSys.y + 5) {
return;
}
// M0,0 L0,150 L200,75 Z - Right arrow
// M0,0 L75,200 L150,0 Z - Down arrow
const labelItem = {
type: 'group',
position: [
10,
y
],
children: [] as any[]
};
var isExpanded = api.value(3);
const labelExpandIndicator = {
type: 'path',
shape: {
d: isExpanded ? 'M0,0 L75,200 L150,0 Z' : 'M0,0 L0,150 L200,75 Z',
x: 0,
y: -5,
width: 10,
height: 10,
layout: 'cover'
},
style: {
fill: '#000'
}
};
var hasChildren = api.value(2);
if (hasChildren) {
labelItem.children.push(labelExpandIndicator);
}
const hierarchyLevel = api.value(4);
const labelText = {
type: 'text',
style: {
x: 20 + (hierarchyLevel * 20),
y: 7,
text: api.value(1),
textVerticalAlign: 'bottom',
textAlign: 'left',
textFill: '#000'
}
};
labelItem.children.push(labelText);
return labelItem;
}
Demo code
Below is the full demo code. Just copy paste the below code in eCharts Editor
labelData = [{
name: "Application A to B",
value: [
2, // Category Level. Higher is on top.
"Application A to Application B", // Label Name
true, // Is there children
true, // Is expanded
0 // Hierarchy level
]
}, {
name: "Application B to Cosmos",
value: [
1,
"Application B to Cosmos",
false,
false,
1
]
}];
data = [{
name: "Application A to B",
value: [
2,
100,
1000,
1000
],
itemStyle: {
normal: {
color: '#7b9ce1'
}
}
}, {
name: "Application B processing",
value: [
1,
200,
700,
500
],
itemStyle: {
normal: {
color: '#bd6d6c'
}
}
}];
option = {
title: {
text: 'Dependency',
left: 'center'
},
tooltip: {
confine: true,
formatter: function (params) {
return params.marker + params.name + ': ' + params.value[3] + ' ms';
}
},
dataZoom: [{
type: 'slider',
filterMode: 'weakFilter',
showDataShadow: false,
top: 360,
labelFormatter: ''
}, {
type: 'inside',
filterMode: 'weakFilter'
},
{
type: 'slider',
zoomLock: true,
width: 10,
right: 10,
top: 70,
bottom: 20,
start: 95,
end: 100,
handleSize: 0,
showDetail: false,
}],
grid: {
height: 250
},
xAxis: {
min: 100,
scale: true,
axisLabel: {
formatter: function (val) {
return val + ' ms';
}
}
},
yAxis: {
axisTick: { show: false },
splitLine: { show: false },
axisLine: { show: false },
axisLabel: { show: false },
min: 0,
max: labelData.length + 1,
},
series: [{
type: 'custom',
renderItem: renderGanttItem,
itemStyle: {
opacity: 0.8
},
encode: {
x: [1, 2],
y: 0,
},
data: this.data,
zlevel: 10
},
{
type: 'custom',
renderItem: renderAxisLabelItem,
itemStyle: {
opacity: 0.8
},
encode: {
x: -1,
y: 0,
},
data: this.labelData,
zlevel: 5
}]
};
merge = {};
mergeData = {};
function renderAxisLabelItem(params, api) {
var categoryLevel = api.value(0);
var start = api.coord([0, categoryLevel]);
var barHeight = api.size([0, 1])[1] * 0.6;
var y = start[1];
if (y < params.coordSys.y + 5) {
return;
}
// M0,0 L0,150 L200,75 Z - Right arrow
// M0,0 L75,200 L150,0 Z - Down arrow
const labelItem = {
type: 'group',
position: [
10,
y
],
children: []
};
var isExpanded = api.value(3);
const labelExpandIndicator = {
type: 'path',
shape: {
d: isExpanded ? 'M0,0 L75,200 L150,0 Z' : 'M0,0 L0,150 L200,75 Z',
x: 0,
y: -5,
width: 10,
height: 10,
layout: 'cover'
},
style: {
fill: '#000'
}
};
var hasChildren = api.value(2);
if (hasChildren) {
labelItem.children.push(labelExpandIndicator);
}
const hierarchyLevel = api.value(4);
const labelText = {
type: 'text',
style: {
x: 20 + (hierarchyLevel * 20),
y: 7,
text: api.value(1),
textVerticalAlign: 'bottom',
textAlign: 'left',
textFill: '#000'
}
};
labelItem.children.push(labelText);
return labelItem;
}
function renderGanttItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var coordSys = params.coordSys;
var barLength = end[0] - start[0];
// Get the heigth corresponds to length 1 on y axis.
var barHeight = api.size([0, 1])[1] * 0.6;
var x = start[0];
var y = start[1] - barHeight / 2;
var rectNormal = echarts.graphic.clipRectByRect({
x: x, y: y, width: barLength, height: barHeight
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return {
type: 'group',
children: [{
type: 'rect',
shape: rectNormal,
style: api.style()
}]
};
}

how to set negative axes intervals in highcharts

I want to set intervals of negative and positive axes differently like my data in positive have values around 4000000 and in negative I have -2, -5 , -10 ..etc such values and they all are dynamic .
What's the best way to do that except Tick positioner? or with tick positioner?
Using Highcharts in Angular

You can use two y-axes and assign series to the appropriate one based on values.
yAxis: [{
height: '50%',
min: 0
}, {
top: '50%',
height: '50%',
offset: 0,
max: 0
}],
series: [{
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
}, {
data: [0, -1, 0, -2, -2, -3, -2, -5, 0, -2],
yAxis: 1,
}]
Live demo: http://jsfiddle.net/BlackLabel/0zsnpgou/
API Reference: https://api.highcharts.com/highcharts/yAxis
I'm using combination chart with four different data arrays in series and each one them is expected to have negative values
this is my chart
the code here
export const getAirlinesChartOption = (data) => {
let val;
console.log('data',data)
let tpSegments = data.map((x) => x.tpSegments);
let amadeusSegments = data.map((x) => x.amadeusSegments);
let sabreSegments = data.map((x) => x.sabreSegments);
let lytpSegments = data.map((x) => x.lytpSegments);
console.log('tpSegments',tpSegments)
console.log('amadeusSegments',amadeusSegments)
console.log('sabreSegments',sabreSegments)
console.log('lytpSegments',lytpSegments)
const allValues =[]
tpSegments.map((x,index)=>{
allValues.push(tpSegments[index])
allValues.push(amadeusSegments[index])
allValues.push(sabreSegments[index])
allValues.push(lytpSegments[index])
})
console.log('allValues',allValues)
const neg = allValues.filter(function (v) {
return v < 0;
}),
pos = allValues.filter(function (v) {
return v > 0;
});
let positiveCount = pos.length;
let negativeCount = neg.length;
let posMax = Math.max(...pos)
let negMax = Math.max(...neg)
console.log('pos',pos)
console.log('neg',neg)
console.log('posMax',posMax)
console.log('negMax',negMax)
let sortedPosArray = pos.sort(function(a, b) {
return a - b;
});
let sortedNegArray = neg.sort(function(a, b) {
return a - b;
});
let tickArray = sortedNegArray.concat(sortedPosArray)
console.log('sortedPosArray',sortedPosArray)
console.log('sortedNegArray',sortedNegArray)
console.log('tickArray',tickArray)
console.log('positiveCount',positiveCount)
console.log('negativeCount',negativeCount)
let obj: Highcharts.Options = {
credits: {
enabled: false,
},
chart: {
type: "column",
height: 180,
reflow: false,
},
title: {
text: null,
},
legend: {
padding: 0,
itemMarginTop: -15,
itemMarginBottom: -15,
itemHoverStyle: {
color: "#83858e",
},
itemStyle: {
fontSize: "10px",
color: "#83858e",
fontWeight: "light",
},
},
xAxis: {
categories: data.map(x=>x.airline),
labels: {
style: {
color: "#b6bbc0",
fontSize: "10px",
},
},
},
yAxis: {
gridLineDashStyle: "Dash",
labels: {
formatter: function () {
if (this.value >= 1000 || this.value <= -1000) {
val = Highcharts.numberFormat(this.value / 1000, 0) + "K"
return val;
}
else {
val = this.value
return val;
}
},
style: {
color: "#b6bbc0",
fontSize: "10px",
},
},
title: {
text: "",
},
// tickInterval:1000,
// tickPositions: tickArray,
min: negMax<0 && negMax !== -Infinity ?negMax:0,
max: posMax>0 && posMax !== -Infinity?posMax:0,
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.min),
increment = Math.ceil((Math.abs(this.max) - Math.abs(this.min)) / 10);
console.log('increment',increment)
if (this.max !== null && this.min !== null) {
console.log('min',this.min);
for (tick; tick - increment <= this.max; tick += increment) {
positions.push(tick);
}
}
return positions;
}
},
plotOptions: {
series: {
events: {
legendItemClick: function (e) {
e.preventDefault();
},
},
},
},
tooltip: {
pointFormatter: function(){ return '' +
'<span style="color:' + this.color + '">' + this.series.name + '</span>: <b>' + this.y.toLocaleString() +'</b>'
},
//headerFormat: '<span style="font-size:11px">{category}</span><br>',
},
series: [
{
name: "TP",
type: "column",
color: "#01DFA5",
data: data.map(x=>Number(x.tpSegments)),
pointWidth: 5,
groupPadding:0.28,
borderRadius: 5,
},
{
name: "1S",
type: "column",
color: "#5858FA",
data:data.map(x=>Number(x.sabreSegments)),
pointWidth: 5,
groupPadding:0.28,
borderRadius: 5,
},
{
name: "1A",
type: "column",
color: "#11cdef",
data: data.map(x=>Number(x.amadeusSegments)),
pointWidth: 5,
groupPadding:0.28,
borderRadius: 5,
},
{
type: "line",
name: "LYTP",
grouping: false,
color: "#000000",
data: data.map(x=>Number(x.lytpSegments)),
borderRadius: 5,
pointRange:1,
marker: {
symbol: "triangle",
},
},
],
};
return obj;
};

How to add labels for highcharts activity gauge for each series

I need to add custom labels for the solid gauge high charts as shown in the fiddle - http://jsfiddle.net/195gmh5k/1/
$(function () {
// Uncomment to style it like Apple Watch
/*
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'black'
},
colors: ['#F62366', '#9DFF02', '#0CCDD6'],
title: {
style: {
color: 'silver'
}
},
tooltip: {
style: {
color: 'silver'
}
}
});
}
// */
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 50
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: [],
plotLines: [{
color: 'red', // Color value
value: 0, // Value of where the line will appear
width: 2, // Width of the line,
zIndex: 10
}, {
color: 'red',
value: 33.3,
width: 2,
zIndex: 10
}, {
color: 'red',
value: 66.6,
width: 2,
zIndex: 10
}]
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Move',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 80
}]
}, {
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}]
}, {
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
},
/**
* In the chart load callback, add icons on top of the circular shapes
*/
function callback() {
// Move icon
this.renderer.label('hello1', 180, 35, 'rect', 0, 0, true, true, '')
.add(this.series[2].group);
// Exercise icon
this.renderer.label('hello2', 180, 65, 'rect', 0, 0, true, true, '')
.add(this.series[2].group);
// Stand icon
this.renderer.label('hello3', 180, 100, 'rect', 0, 0, true, true, '')
.add(this.series[2].group);
});
});
I am using Renderer.label api to specify the position of labels.
Currently I tried locating the x and y coordinates on trial and error basis.
What is the more efficient (basis method) way to specify the coordinates for the labels. I need to specify that align all the labels along the vertical plot line at different gauges.

I found a better solution and cleanest:
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
height: '50%',
events: {
render: renderIcons,
redraw: function () {
for (var i = 0; i < this.series.length; i++){
if (!this.series[i].icon) {
this.series[i].icon = this.renderer.label(this.series[i].yData[0]+'%', this.series[i].data[0].x, this.series[i].data[0].y, 'rect')
.attr({
zIndex: 10,
fontColor:'#FFFF'
})
.add(this.series[2].group);
this.series[i].icon.translate(
this.chartWidth / 2 - 5,
this.plotHeight / 2 - this.series[i].points[0].shapeArgs.innerR -
(this.series[i].points[0].shapeArgs.r - this.series[i].points[0].shapeArgs.innerR) / 2
);
}
}
}
},
},
legend: {
enabled: true
},
title: {
text: 'My chart',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
valueSuffix: '%',
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}</span>',
positioner: function (labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) + 15
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.color(Highcharts.getOptions().colors[0])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.color(Highcharts.getOptions().colors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.color(Highcharts.getOptions().colors[2])
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: [],
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true,
showInLegend: true,
//colors: ['#F62366', '#9DFF02', '#0CCDD6'],
}
},
series: [{
name: 'Move',
colorByPoint: true,
marker: {
fillColor: '#7cb5ec',
},
data: [{
color: '#7cb5ec',
radius: '112%',
innerRadius: '88%',
y: 80
}],
}, {
name: 'Exercise',
marker: {
fillColor: '#f7a35c',
},
data: [{
color: '#f7a35c',
radius: '87%',
innerRadius: '63%',
y: 65
}],
}, {
name: 'Stand',
marker: {
fillColor: '#90ee7e'
},
data: [{
color: '#90ee7e',
radius: '62%',
innerRadius: '38%',
y: 50
}],
}],
});
Now, the function renderIcons can render a label as icon:
function renderIcons() {
for (var i = 0; i < this.series.length; i++){
if (!this.series[i].icon) {
this.series[i].icon = this.renderer.label(this.series[i].yData[0]+'%', this.series[i].data[0].x, this.series[i].data[0].y, 'rect')
.attr({
zIndex: 10,
fontColor:'#FFFF'
})
.add(this.series[2].group);
this.series[i].icon.translate(
this.chartWidth / 2 - 5,
this.plotHeight / 2 - this.series[i].points[0].shapeArgs.innerR -
(this.series[i].points[0].shapeArgs.r - this.series[i].points[0].shapeArgs.innerR) / 2
);
}
}
}
And this function is for add legends with the color´s series:
Highcharts.Legend.prototype.colorizeItem = function(item, visible) {
item.legendGroup[visible ? 'removeClass' : 'addClass']('highcharts-legend-item-hidden');
if (!this.chart.styledMode) {
var legend = this,
options = legend.options,
legendItem = item.legendItem,
legendLine = item.legendLine,
legendSymbol = item.legendSymbol,
hiddenColor = legend.itemHiddenStyle.color,
textColor = visible ?
options.itemStyle.color :
hiddenColor,
symbolColor = visible ?
(item.color || hiddenColor) :
hiddenColor,
markerOptions = item.options && item.options.marker,
symbolAttr = {
fill: symbolColor
};
if (legendItem) {
legendItem.css({
fill: textColor,
color: textColor // #1553, oldIE
});
}
if (legendLine) {
legendLine.attr({
stroke: symbolColor
});
}
if (legendSymbol) {
// Apply marker options
if (markerOptions) { // #585
symbolAttr = item.pointAttribs();
if (!visible) {
// #6769
symbolAttr.stroke = symbolAttr.fill = hiddenColor;
}
}
legendSymbol.attr(symbolAttr);
}
}
Highcharts.fireEvent(this, 'afterColorizeItem', {
item: item,
visible: visible
});
}
Regards.

Tooltip plothover doesn't appear on modal

I use flot Chart library to show a graph on a modal window.It works fine but the Tooltip popover doesn't appear when I plothover.
Here is my .js code :
$(document).on('click','a[data-target="#evolutieProdus"]',function(){
var route = 'http://www.fabricademagie.ro/metronic/comenzi/returnOrdersYear';
var productcode = $(this).data('productcode');
var productid = $(this).data('productid');
var data = {
'productcode': productcode,
'productid': productid
};
$.post(route,data,function(response){
response = jQuery.parseJSON(response);
//console.log(response);
var obj = response.an ;
var an_prezent = Object.keys(obj).map(function(e){
return [Number(e), obj[e]];
});
var obj2 = response.precedent ;
var an_precedent = Object.keys(obj2).map(function(e){
return [Number(e), obj2[e]];
});
var obj3 = response.second ;
var an_secund = Object.keys(obj3).map(function(e){
return [Number(e), obj3[e]];
});
function showChartTooltip(x, y, xValue, yValue, color) {
var _item = $('<div id="tooltip" class="chart-tooltip2">' + yValue + '<\/div>').css({
position: 'absolute',
display: 'none',
top: y,
left: x,
border: '0px solid #ccc',
padding: '2px 6px',
'color' : color,
'border' : '1px solid #000',
'background-color': '#CCC !important'
}).appendTo("#evolutieProdus").fadeIn(300);
_item.css('left',x - (_item.width() - -20));
}
if ($('#chart_2').size() != 0) {
//$('#orders_year_loading').hide();
//$('#orders_year_content').show();
var plot_statistics = $.plot($("#chart_2"),
[{
data: an_prezent,
lines: {
show: true,
fill: false,
lineWidth: 5
},
color: '#D91E18',
shadowSize: 0,
label: " Anul <?=date('Y');?>"
},{
data: an_prezent,
points: {
show: true,
fill: true,
radius: 7,
fillColor: "#D91E18",
lineWidth: 5
},
color: '#fff',
shadowSize: 1
},{
data: an_precedent,
lines: {
show: true,
fill: false,
lineWidth: 3
},
color: '#00BCD4',
shadowSize: 0,
label: " Anul <?=date('Y') - 1;?>"
},{
data: an_precedent,
points: {
show: true,
fill: true,
radius: 5,
fillColor: "#00BCD4",
lineWidth: 3
},
color: '#fff',
shadowSize: 1
},{
data: an_secund,
lines: {
show: true,
fill: false,
lineWidth: 3
},
color: '#FF9800',
shadowSize: 0,
label: " Anul <?=date('Y') - 2;?>"
},{
data: an_secund,
points: {
show: true,
fill: true,
radius: 5,
fillColor: "#FF9800",
lineWidth: 3
},
color: '#fff',
shadowSize: 1
}],
{
xaxis: {
tickLength: 0,
tickDecimals: 0,
mode: "categories",
min: 0,
font: {
lineHeight: 34,
style: "normal",
variant: "small-caps",
color: "#FF5722"
}
},
yaxis: {
ticks: 5,
tickDecimals: 0,
tickColor: "#eee",
font: {
lineHeight: 34,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
grid: {
hoverable: true,
borderWidth: 0,
margin: 5
}
});
var previousPoint = null;
$("#chart_2").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
var _color = "#212121";
if(item.series.points.fillColor !== undefined && item.series.points.fillColor !== null && item.series.points.fillColor.length){_color = item.series.points.fillColor;}
showChartTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1] + ' Bucati vandute',_color);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
}
});
});

I find the solution.I put a z-index property on my tooltip class.