In jsfiddle I'd like the little green circles to stay put when hovered over.
In HighStock, when hovering over flags, how can I make them stay put (without trying to come to foreground)?
//
Generally you cannot use points with the same x value inside single serie. You need to use separated series like here: http://jsfiddle.net/5pXfM/5/
{
type: 'flags',
data: [{
x: Date.UTC(2011, 2, 10),
title: ' ',
text: 'Do not move'
}],
onSeries: 'dataseries',
shape: 'circlepin',
color: '#5F86B3',
fillColor: 'rgba(50, 255, 50, .75)',
y: -10,
stackDistance: 5
},{
type: 'flags',
data: [{
x: Date.UTC(2011, 2, 10),
title: ' ',
text: 'Do not move'
}],
onSeries: 'dataseries',
shape: 'circlepin',
color: '#5F86B3',
fillColor: 'rgba(50, 255, 50, .75)',
y: -30,
stackDistance: 5
}
Related
I'm trying to create a chart that looks like the attached image.
I have come very close by using a bullet graph chart and I'm trying to get an arrow image dataLabel positioned on the series point but it sometimes goes to the right or left of the point. My intention is to have the series color transparent and have the datalabel visually replace the extending bar. not the target bar but the series bar itself. Buy my image not placed exactly on the point in the series OR is there another way to use an image or icon on top of the series point?
plotOptions: {
series: {
dataLabels: {
enabled:true,
useHTML:true,
x: -3,
y: 35,
format: '<img src="https://image.ibb.co/cqabM8/g3.png">'
},
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '300%'
}
}
}
Here is a JSFiddle used to try positioning the arrow...
Depending on how strict you are with how the data for this chart (in other words, where the arrow lies along the chart and how the colored zones are measured), there's a way to mimic this image using plot bands and line markers.
See my snippet below (or the fiddle at https://jsfiddle.net/brightmatrix/r78vz49a/).
I used plot bands to create the colored zones along an axis of 0 to 100 (assuming, for example, that 0% is fresh and 100% is totally rotten/inedible).
Then, there are two series: one with a marker that forms the arrowhead and a second that is simply a vertical line; both complete the arrow. So long as you keep the x-axis values for both the arrowhead and line consistent, the arrow would "move" along the line.
I hid the y-axis labels since they weren't relevant to your chart. If you wanted, you could also hide the x-axis labels and move your plot band labels below the chart.
Below is a screenshot of the final product. I hope this information is helpful for you in solving this challenge.
Highcharts.chart('container', {
title: { text: 'Freshness scale' },
xAxis: {
plotBands: [{
color: 'rgba(0,255,0,0.5)',
from: 0,
to: 33,
label: { text: 'Fresh', align: 'center', x: -10 }
},{
color: 'rgba(255,255,0,0.5)',
from: 33,
to: 67,
label: { text: 'Stale', align: 'center', x: -10
}
},{
color: 'rgba(255,0,0,0.5)',
from: 67,
to: 100,
label: { text: 'Moldy', align: 'center', x: -10
}
}],
min: 0,
max: 100
},
yAxis: {
min: 0,
max: 1,
tickInterval: 1,
title: { text: '' },
labels: { enabled: false }
},
legend: { enabled: false },
tooltip: { enabled: false },
series: [{
name: 'Freshness arrow',
data: [{x: 55, y: 0}],
lineWidth: 0,
color: 'black',
marker: { symbol: 'triangle-down', radius: 10, y: -10 }
},{
name: 'Freshness line',
data: [{x: 55, y: 0},{x: 55, y: 0.5},],
lineWidth: 4,
color: 'black'
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 150px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
Observe the series one in the below example having a constant value and for that series points connecting lines are not plotted, but when we give a solid colour then the line will be plotted.
Highchart's line chart with constant series not plotting the line b/w points when we use line gradient colour, but if you change that to solid colour then line will be plotting.
highcharts.series[].data = [2, 2, 2, ...];
highcharts.color[0] = {
linearGradient: {...},
stop: {...}
};
Check this example:
https://jsfiddle.net/4vk7cdmz/
This is because of the attribute gradientUnits in linearGradient which the default value is objectBoundingBox.
Keyword objectBoundingBox should not be used when the geometry of the
applicable element has no width or no height, such as the case of a
horizontal or vertical line, even when the line has actual thickness
when viewed due to having a non-zero stroke width since stroke width
is ignored for bounding box calculations. When the geometry of the
applicable element has no width or height and objectBoundingBox is
specified, then the given effect (e.g., a gradient or a filter) will
be ignored.
W3C Recommendation
You need to use gradientUnits="userSpaceOnUse".
Highcharts.js has fixed this issue in version 2.2.
Instead of using linearGradient as an object
"linearGradient": {
"x1": 0,
"y1": 0,
"x2": 1,
"y2": 0
}
, using it as an array
"linearGradient": [x1, y1, x2, y2],
will set gradientUnits to userSpaceOnUse in highcharts.js
(This requires knowledge of the line width.)
Here's a demo:
var Chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'a constant series line is not plotting when using linear gradient colour.'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
colors: [{
"linearGradient": [0, 0, 500, 0],
"stops": [
[0, "rgb(35,190,250)"],
[1, "rgb(51,223,188)"]
]
}, {
"linearGradient": [0, 0, 500, 0],
"stops": [
[0, "rgb(250,79,168)"],
[1, "rgb(156,120,229)"]
]
}],
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [2, 2, 2, 2, 2, 2, 2]
},
{
name: 'Jane',
data: [1, 1, 1, 1, 1, 1, 2]
}
]
});
#container {
width: 100%;
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/css/highcharts.css" />
<div id="container"></div>
I would like to display answers of type "yes/no/don't know". I was thinking about something similair to Bar with negative stack, but with "don't know" as a neutral part in the middle with equal width on both sides of zero. To show what I mean I added two neutral series to the standard fiddle. How can I merge them into one neutral series in the middle?
{
name: 'Neutral',
data: [...]
}
Maybe I'm on the completely wrong track. Any suggestions?
modified Bar with negative stack-fiddle
You might be able to do this with columnrange series that is inverted (to look like bar chart). This does require the highcharts-more.js library as well.
You need to set the index for each question (x), the low value (low), the high value (high), and then the color you would want (color).
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true
},
xAxis: {
categories: ['Q1', 'Q2']
},
legend: {
enabled: false
},
series: [{
name: 'Answers',
data: [
// Question 1
{
x: 0,
low: -10,
high: -5,
color: 'red'
}, {
x: 0,
low: -5,
high: 5,
color: 'blue'
}, {
x: 0,
low: 5,
high: 10,
color: 'green'
},
// Question 2
{
x: 1,
low: -15,
high: -2,
color: 'red'
}, {
x: 1,
low: -2,
high: 8,
color: 'blue'
}, {
x: 1,
low: 8,
high: 20,
color: 'green'
}
]
}]
});
Sample jsFiddle.
I am trying to re-implement an existing graph in Highchart. I would like to know if Highchart supports such graph. If yes, Please suggest me the API/Documents that would help me in this direction.
Below is the image of what graph would look like:
How the graph should look
About Chart:
It looks as if multiple charts are combined into charts.
x-axis for all the 'Events' is time(2- years default).
Each 'Event' graph can be of different type (point, spline, continuous etc.)
Can I customize the representation of data-point in each 'Event chart' differently. i.e.(triangle,square etc).
Thanks,
Amit
An example of some of the features you've asked about:
1) using multiple y axes, stacked vertically, you can achieve the layout that you want:
yAxis: [{
top: 10,
height: 60,
offset: 0,
title: { text: 'Plot 1'}
},{
top: 80,
height: 60,
offset: 0,
title: { text: 'Plot 2'}
},{
top: 140,
height: 120,
offset: 0,
title: { text: 'Plot 3'}
},{
top: 270,
height: 60,
offset: 0,
title: { text: 'Plot 4'}
}]
On each series, you can specify individual marker settings:
marker: {
enabled: true,
symbol: 'triangle',
radius: 6,
...etc...
},
You can set a date-time x axis type:
xAxis: {
type: 'datetime'
}
Fiddle example:
http://jsfiddle.net/jlbriggs/py5cznd7/
I have this Highcharts column chart:
http://jsfiddle.net/ltherond/bmk71a8r/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
type: 'linear'
},
credits: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
shadow: false
}
},
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
});
});
I want the first bar to extend horizontally from 0 to 500 on the xaxis.
In other words, I want each bar to start at the current x value and end at the next x value.
How do I do that?
The option you are looking for is connectNulls for your series attribute
From my knowledge this options is only available for Area and Line Charts and no longer available for column or bar chart
I recommend you to change your Chart Type to area chart and use connectNulls option as mentioned in Documentation here
To meet your requirement in Column chart itself you need to tune your data you fed into High chart as follows in your series code segment
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
},{
x: 100,
y: 5,
color: "#00FF00"
},{
x: 200,
y: 5,
color: "#00FF00"
},{
x: 300,
y: 5,
color: "#00FF00"
},{
x: 400,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
This will solve your problem. see the working fiddle http://jsfiddle.net/bmk71a8r/3/
For this approach you need to write extra codes to format your Data
Good Day