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/
Related
Here is what I am going for, disregard the pointer on top.
You can use the annotations module:
annotations: [{
labels: [{
borderRadius: 0,
padding: 20,
backgroundColor: '#fff',
style: {
color: '#000'
},
point: {
xAxis: 0,
yAxis: 0,
x: 0,
y: 15
},
y: -130,
text: 'Col de la Joux'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/eb9k5o7m/
API Reference: https://api.highcharts.com/highcharts/annotations
Docs: https://www.highcharts.com/docs/advanced-chart-features/annotations-module
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>
I have multiple Y axis on my chart, they have no titles. I cannot find a property that would allow me to add a bit of space between the axis. Is it possible ? This is what I have now. As you can see it looks very squashed.
You can use the offset property.
Example:
yAxis: [{
offset: 0,
lineColor: Highcharts.getOptions().colors[0],
title: { text: 0 }
},{
offset: 50,
lineColor: Highcharts.getOptions().colors[1],
title: { text: 0 }
},{
offset: 100,
lineColor: Highcharts.getOptions().colors[2],
title: { text: 0 }
}]
(chart margin may also need to be adjusted to suit, depending on your set up)
Fiddle:
http://jsfiddle.net/jlbriggs/pekhvvcq/
Reference:
http://api.highcharts.com/highcharts/yAxis.offset
I am trying to plot a 'scatter' graph and 'columnrange' graph with multiple y-axis (ie two graphs stacked on top of each other with common x-axis). The scatter plot represents an event that occured in particular month and columnrange plot represents the time duration of an event. Both the graphs represent one and only one event type. I tried many things but was not able to produce a graph with my requirements.
$(function() {
$('#container').highcharts({
title: { text: null },
subtitle: { text: null },
legend: { enabled: false },
xAxis: {
type: 'datetime',
title: { text: null }
},
yAxis: [{
top: 10,
height: 60,
offset: 0,
title: { text: 'Plot 1'}
},{
top: 80,
height: 60,
offset: 0,
title: { text: 'Plot 2'}
}]
});
chart = $('#container').highcharts();
chart.addSeries({
yAxis: 0,
type: 'scatter',
marker: {
enabled: true,
symbol: 'triangle'
},
data: [[1356977700000,1], [1359656100000,1], [1364753700000,1]]
});
chart.addSeries({
yAxis: 1,
type: 'columnrange',
data: [[1356977700000, 1359656100000], [1362075300000, 1364753700000]]
});
});
This is how I want to represent columnrange graph
This is how my current plot looks like (second graph is behaving as 'column' graph instead of 'columnrange')
Also I would like to locate the scatter plot points in the middle of the area assigned for scatter plot. How can I achieve that. (currently I have set y=1 for scatter graph.)
To have columnrange series inverted a chart needs to be inverted.
If you want for columntange points to share same horizontal line, then set same x value for points.
Example: http://jsfiddle.net/ubdxdqnh/
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