I have a round symbol in tolltip now, I need a square and I need change a size.
Thank you
[http://jsfiddle.net/n3h2totc/][2]
You can change everything inside tooltip by https://api.highcharts.com/highcharts/tooltip.formatter
Highcharts.chart('container', {
tooltip: {
formatter: function(tooltip) {
return `<span style="color:${this.point.color}; font-size: 16px">■</span> ${this.series.name}: <b>${this.point.y}</b><br/>`
}
},
series: [{
data: [1, 2, 3, 4]
}]
})
Related
I would like to use a different hover color state when the value of the column is negative. I wasn't able to find a work-around to accomplish this on highchart.js, but I might be missing something?
I'm currently using negativeColor and the states.hover.color options.
Here's the reproduction:
https://jsfiddle.net/ceaj8dto/1/
Code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
series: [{
data: [5, -3, 4, -7, 2]
}],
plotOptions: {
column: {
negativeColor: 'red',
states: {
hover:{
color: 'blue',
}
}
},
},
});
You can use mouseOver callback function and change color of a point, depending on y value.
plotOptions: {
column: {
point: {
events: {
mouseOver: function() {
this.graphic.attr({
fill: this.y < 0 ? 'black' : 'blue'
});
}
}
},
negativeColor: 'red'
}
}
Live demo: https://jsfiddle.net/BlackLabel/9ctmf2ju/
API Reference:
https://api.highcharts.com/highcharts/series.column.events.mouseOver
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
For some reasons, I need to use Highstock (navigator, crosshair, annotations...).
And I need to display a graph with numerical values for X axis.
In this simple example, the X Axis looks chaotic, and numeric values are not placed/spaced as expected.
Highcharts.stockChart('container', {
rangeSelector: {
enabled: false
},
navigator:{
enabled: true
},
xAxis: {
labels: { formatter: function () {return this.value;}},
crosshair: {
width: 1,
color: 'black'
}
},
series: [{
type: 'areaspline',
data: [
[10, 30],
[20, 25],
[25, 22.5],
[30,20],
[40,15]
]
}]
});
JSFiddle example:
Here
1/ What should I do to get a graphic like this?
Normal X axis with numerics
2/ I can see the line is smoothed. How can I disable this smoothing?
Disable the ordinal option:
xAxis: {
ordinal: false,
...
}
Live demo: https://jsfiddle.net/BlackLabel/q6xv7koh/
API Reference: https://api.highcharts.com/highstock/xAxis.ordinal
Does anyone know if we can achieve something like this in Highcharts?
We wish that a certain rectangular area gets highlighted when the user mouseover the charts.
Did anyone accomplish something similar before that may help us here?
Thank you.
You can use renderer to render any shape on mouseover and hide it on mouseleave. Positioning rendered shapes require some calculation/coding but it gives you total freedom.
From the picture you posted, you can also use an easier approach, not the most elegant, but it is fast in getting the result. Create a hidden series, specify the points which will define the area and show/hide it on events.
series: [{
data: [5, 10, 15, 10, 5],
color: 'rgba(0,0,200, 0.2)',
states: {
hover: {
enabled: false
}
}
}, {
id: 'h1',
data: [
[1, 10], {
x: 2,
y: 15,
marker: {
enabled: true,
fillColor: 'black',
symbol: 'circle'
}
},
[3, 10]
],
marker: {
enabled: false
},
linkedTo: 's1',
visible: false,
enableMouseTracking: false
}],
example: http://jsfiddle.net/9L4e328j/
I haven't tried this , but you can try something like this to get the desired result :
tooltip: {
formatter: function() {
//resetting state
for(i=0;i<this.series.data.length;i++){
this.series.data[i].setState();
}
var index=this.series.data.indexOf( this.point )
//setting state on the current,previous,next point
this.series.data[index].setState('hover');
this.series.data[index-1].setState('hover');
this.series.data[index+1].setState('hover');
return "your tooltip";
}
}
I want to add a question mark to a Highcharts bar chart where data in the data set is null, because the value zero is shown in the same way as when the data is null. Is this possible?
EDIT I mean column chart
I found a solution. You need to set the point to zero for the formatter to know where to draw the image:
var series = [8, 7, 8, null, 9]
$(function () {
$('#container').highcharts({
title: {
text: 'Example null values'
},
series: [{
name: "values",
data: series,
type: "column",
zIndex: 0,
color: "#55F26A"
}],
plotOptions: {
column: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
if(this.y == null) {
this.point.update(0);
return "<img src='http://placehold.it/20'/>";
}
else return null;
}
}
}
},
});
});
try it at http://jsfiddle.net/X8Scf/4/
I am creating a HighChart with a plotLine in it. The plotLine has a fixed value, while the data can vary between charts.
HighChart scales the y-axis automatically based on the maximum value of data, but it doesn't consider the plotLine's value in its calculations.
Hence, if the data range encompasses the plotLine value, the plotLine gets shown, but gets cropped out of the viewport if not.
Example:
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 650]
}]
});
});
});
JSFiddle for above code: http://jsfiddle.net/4R5HH/3/
The goal line (in red) is shown for the default data, but if I change the data to [107, 31, 250], then the plotLine goes out of the graph viewport and hence becomes invisible.
One other option that does not introduce data points:
yAxis: {
minRange:450,
min:0,
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
This sets the minimum for the yAxis to 0 (this is unlikely to be false in this case) and the minimum Range to 450.
See updated fiddle.
You need to add in a point to you chart but disable the marker.
I added a new series with scatter plot type and its value equal to the goal value:
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}
See updated jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/
In some cases, wergeld's solution would be preferable than jank's solution, especially when you are not sure about min and minRange. But wergeld's solution has a minor issue. If you point your mouse over the plot line, it will show a point and tooltip on the point. To avoid this, I have modified his solution and added enableMouseTracking to get rid of the problem.
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450],
enableMouseTracking: false
}
See updated jsFiddle: http://jsfiddle.net/4R5HH/570/
You could simply set the max attribute to the max value you will have:
yAxis: {
max:650 //HERE
plotLines...
},
Adjust the axis while loading the chart:
$(function() {
$('#container').highcharts({
chart: {
events: {
load: function() {
var check = $('#container').highcharts();
var min = check.yAxis[0].min;
var max = check.yAxis[0].max;
var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
if (pLine > max) {
check.yAxis[0].setExtremes(null, pLine);
}
if (pLine < min) {
check.yAxis[0].setExtremes(pLine, null);
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar'],
},
yAxis: {
minPadding: 0.30,
plotLines: [{
color: '#FF0000',
width: 2,
value: 200
}]
},
series: [{
data: [70, 60, 95]
}]
});
});