i have a highstock chart with multiple series, each one has it's own tooltip(shared:false), after hovering mouse, a label appear on xAxis, how to get ride of it?
{
xAxis: {
crosshair: false
},
tooltip: {
useHTML: true,
shadow: false,
borderRadius: 0,
borderColor: "transparent",
backgroundColor: "transparent",
borderWidth: 0,
},
plotOptions: {
series: {
turboThreshold: 0,
},
states: {
hover: {
enabled: false,
},
},
},
series: [ {
type: "line",
name: series[0].name,
data: [...],
color: series[0].color,
tooltip: {
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
},
},
{
type: "line",
data: [...],
name: series[1].name,
color: series[1].color,
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
}],
}
in here i put a sample of what i mean and a picture:
js fiddle
From Highcharts API:
split: boolean Since 5.0.0
Split the tooltip into one label per series, with the header close to
the axis. This is recommended over shared tooltips for charts with
multiple line series, generally making them easier to read. This
option takes precedence over tooltip.shared.
To get rid of the header set headerFormat to an empty string.
tooltip: {
headerFormat: ''
}
Live demo: https://jsfiddle.net/BlackLabel/bc467dmo/
API Reference: https://api.highcharts.com/highstock/tooltip.headerFormat
I want create a bar line graphs with navigator,range selector, y axis from both side and graph sector. I implement it using Highcharts.Chart() but it's x-axis not comes properly. when i create x-axis properly after change categories to ["2017-2-3'] then range selector goes to 1970 (default value) so i convert date to milliseconds. Now in the x-axis have unwanted values. I want to show only x-axis values which shows in category array. currently 1m,3m,6m not worked i think it happen because of this x-axis issue.
jsfiddle : http://jsfiddle.net/m05sgk3j/1/
$(document).ready(function() {
var categories = [1551420000000,1549000800000,1546322400000,1543644000000,1541052000000, 1538373600000, 1535781600000,1533103200000, 1530424800000, 1527832800000, 1525154400000, 1522562400000, 1519884000000, 1517464800000,1514786400000];
new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'In March 2019, the average CT_HOURS is 10.55 hours.'
},
rangeSelector: {
enabled: true,
buttons: [{
type: 'millisecond',
count: 1,
text: '1m'
}, {
type: 'millisecond',
count: 3,
text: '3m'
}, {
type: 'millisecond',
count: 6,
text: '6m'
}, {
type: 'all',
text: 'All'
}],
selected: 4,
inputDateFormat: '%Y-%m-%d',
inputEditDateFormat: '%Y-%m-%d'
},
navigator: {
enabled: true,
xAxis: {
tickInterval: 15,
labels: {
/* formatter: function() {
return categories[this.pos]
} */
}
}
},
scrollbar: {
enabled: true
},
xAxis: {
// categories: categories,
type: 'datetime',
tickInterval : 2,
// tickInterval: {_tickInterval},
/* labels: {
step:10
}, */
/* maxZoom: 30 * 24 * 3600000, */
dateTimeLabelFormats : {
day: '%Y-%m'
}
// crosshair: true,
// minRange: 1
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}h',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'AVERAGE CT_HOURS',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'REQUEST COUNT',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
series: [{
name: 'REQUEST COUNT',
type: 'column',
yAxis: 1,
data: [
[1551420000000, 49.9],
[1549000800000, 71.5],
[1546322400000, 106.4],
[1543644000000, 129.2],
[1541052000000, 144.0],
[1538373600000, 176.0],
[1535781600000, 135.6],
[1533103200000, 148.5],
[1530424800000, 49.9],
[1527832800000, 71.5],
[1525154400000, 106.4],
[1522562400000, 129.2],
[1519884000000, 144.0],
[1517464800000, 176.0],
[1514786400000, 135.6]
],
tooltip: {
valueSuffix: ''
}
}, {
name: 'AVERAGE CT_HOURS',
type: 'spline',
data: [[1551420000000, 56.6],
[1549000800000, 46.3],
[1546322400000, 32.8],
[1543644000000, 43.4],
[1541052000000, 40.8],
[1538373600000, 43.0],
[1535781600000, 43.1],
[1533103200000, 44.6],
[1530424800000, 45.7],
[1527832800000, 27.8],
[1525154400000, 39.9],
[1522562400000, 29.3],
[1519884000000, 27.9],
[1517464800000, 27.4],
[1514786400000, 17.6]],
tooltip: {
valueSuffix: 'h'
}
}]
});
});
Just comment the tickInterval for the xAxis
//tickInterval : 2,
Fiddle
First of all, you have unsorted data. If you want to invert your data, use reversed option.
Also, the rangeSelector and the tickInterval are wrong. If you use datetime axis, then the basic unit is one millisecond.
However, to show dates only from the categories array, use the tickPositions option and formatter function for labels:
xAxis: {
reversed: true,
minRange: 1,
type: 'datetime',
tickPositions: categories,
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m', this.value);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/a6Lphq4k/
API Reference:
https://api.highcharts.com/highcharts/xAxis.reversed
https://api.highcharts.com/highcharts/xAxis.tickPositions
https://api.highcharts.com/highcharts/xAxis.labels.formatter
(1) First always make sure that you are injecting timestamps in your categories, and formatting them in :
(1-1) xAxis.labels.formatter function [for x axis labels]
(1-2) navigator.xAxis.labels.formatter function [for navigation labels format)
(2) Second make sure that you are clearing your (xAxis.categories) if you push data into it. because highcharts don't sort your array. if you just assign new array that's ok.
(3) Note : Based on values on your categories array, navigation gets some values like xAxis min and xAxis Max. when you change your data these values remain and that's why your navigation collapses. so when changing data make sure to update. you can use 0 for minimum of navigator and categories.length for maximum value of navigator.
you can access updated values also in dataMin and dataMax.
Hope this answer help you.
I'm using highcharts to chart a graph to monitor during the 24 hours when a printer is printing and when a printer is doing nothing.
I've accomplished it using the xrange type, and everything is ok.
The only issue i'm having is that graph is plotted in the middle of the graph and i'd like it to be drawed in the bottom. What should i check?
This is the code i use to create the graph
Highcharts.chart('chart', {
chart: {
type: 'xrange'
},
plotOptions: {
series: {
pointPlacement: 'on',
colors: ["#00e205"],
}
},
xAxis: {
type: 'datetime',
plotBands: bands,
startOnTick: false
},
yAxis: {
min: 0,
startOnTick: false,
categories: ['Stampa'],
labels: {
enabled: false
}
},
legend : {
enabled: false
},
tooltip: {
formatter: function() {
return "Inizio stampa: "+moment(this.x).format('H:mm:ss')+" <br />Fine stampa:"+moment(this.x2).format('H:mm:ss')
}
},
title: {
text: 'Plotter'
}
});
You can disable startOnTick property and set proper min value for yAxis:
yAxis: {
min: 0.45,
startOnTick: false
},
Live demo: http://jsfiddle.net/BlackLabel/o3kxbcum/
API Reference: https://api.highcharts.com/highcharts/yAxis.min
I'm having a problem with Highcharts drawing points that have no data attached to them. The chart is a column chart with drilldown, showing an average "time" per week on the top level, with a drilldown displaying the actual value per case for the selected week.
My problem is this: When I drill down into a certain week, cases that do not exist are still displayed on the chart if they exist between two existing case IDs.e.
Consider the data being passed for week 6: [[272, 25.07][297, 500.54]], only two cases exist: 272 and 297. However, Highcharts is giving me this:
https://i.stack.imgur.com/MpABB.png
This is the code for the chart itself:
Highcharts.chart('DrilldownChart', {
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: "",
labels: {
rotation: 90
},
},
yAxis: {
title: {
text: ''
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
column: {
minPointLength: 0
},
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
format: '{point.y:.1f}',
rotation: 270
}
}
},
tooltip: {
pointFormat: '<span style="color:{#000}"></span>{point.y:.2f}<br/>'
},
series: MainDataArray,
drilldown: {
series: DrilldownDataArray,
}
});
Does anyone know how to stop it from drawing the labels/columns between points with actual data?
Thanks!
You just need to convert the x values from your array to String type, then they would be treated as a category name instead of category indexes. In order to convert it, you can use Array.map() function just like that:
var drilldownSeries = [{
id: 'One',
data: [[272, 25.07], [297, 500.54]].map(elem => {
return [elem[0].toString(), elem[1]]
})
}]
However, before that please make sure that your xAxis.type is set to 'category', because I noticed that in your code there is an empty string assigned to type field.
Here is the example which shows how to achieve described effect:
https://jsfiddle.net/8h03urrr/
I'm generating a series of highcharts and then exporting them to a pdf via jsPDF. They display fine on screen, but when I export an image of the graphs, it duplicates the X axis category labels.
Here is my chart code:
$('#chart').highcharts({
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 20,
spacingLeft: 0,
spacingRight: 0
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: {
categories: ['Sales Performance',],
labels: {
style: {
color: '#000'
}
}
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}%',
overflow: 'justify',
style: {
color: '#000'
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: '% Change',
color: '#c0504d',
data: [4.5]
}]
});
And an example of the issue: http://jsfiddle.net/212qb8qs/
Any ideas???
UPDATE:
The issue was with canvg converting the svg. Solved thanks to this comment: When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?
Well, from your jsfiddle, you use canvg along with highcharts to get a canvas and then convert to PDF what you get. The problem comes from canvg wich seems to handle a bit strangely the tspan that are used in the SVG generated by highcharts (mostly for titles).
So I redirect you to my answer in another question here , where you'll find a dirty fix for that.