I'm trying to change the position of each flag in a chart and I'm using highstock.
I add each flag like this:
{
x: time,
shape: 'url(images/indicators/down_fractal.png)',
y:value,
title: ' ',
text: 'Fractal: ' + value
};
And there is my serie config:
seriesConf : {
id: this.uniqueID,
name: this.toString(),
data: this.indicatorData,
type: 'flags',
onSeries: this.options.onSeriesID, //Series ID on which this flags will be rendered
height: 10,
width: 10,
//y: 100,
//turboThreshold: 0
}
The y value is suppose to set the position of flag but its not working?is it even possible to define each flag position?
In this sample you change the y value and nothing happens.
The main i idea is to create a chart like this:
Flag series is rendered directly above the series, there is no y option for point (see API).
I think you want to use simple scatter series with markers, take a look: http://jsfiddle.net/ujgLzkq9/1/
Or use two flag series (one above, and second one below the line), using series.y option.
Related
I am currently working on a specific type of chart and I am trying to achieve the following behavior for example :
As you can see there's a gap between the series last point and the xAxis max value and the reason for this is i wanna have a fix max value and load the daily values of a specific currency as the day passes by. So for example in the morning this chart would be empty and by 18:30 it would be filled.
In my mock example i have the current chart:
and when I try to set a new xAxis max value ( i also tried softMax) to a future day (using epoch converter for unixtimestamp) i am getting this:
and i set the max by doing :
return {
endOnTick: false,
max:1631962355,
tickLength: 2,
gridLineColor: '#b9b9b9',
gridLineWidth: 0,
tickColor: '#808080',
labels: {
style: {
color: '#b9b9b9',
},
x: 0,
y: 12,
format: '{value:%d.%b}',
},
visible: true,
};
}
UPDATE
After implementing your response I get an even weirder behavior. I get the same initial start I had before (no difference) but now if i click and drag it to the right I go from this :
to this:
and If i click and drag it to the left, into this:
The transformation happens without animation, neither by wathching the drag and move motion happen. It just instantly transforms after i drag my cursor pointer for a while towards the sides i mentioned above
You need to use milliseconds instead of seconds:
xAxis: {
max: 1631962355000,
...
}
Live demo: https://jsfiddle.net/BlackLabel/herncjL5/
API Reference: https://api.highcharts.com/highstock/xAxis.max
I've developed a bunch of bar charts in HighCharts cloud with positive and negative values.
First question:
is it possible to have the xAxis appear at the 0 line (not at the bottom of the chart)?
What I've done so far is offset the xAxis so it's placed on the 0 line, which kinda works but I was hoping for a better solution. The other method I was think was to use plotLines code on the yAxis, but I don't get the ticks:
plotLines: [{
color: '#010101',
width: 2,
value: 0,
zIndex: 5
}],
Second question:
is it possible to have the tick marks to appear between each bar, and not just the bars that have an xAxis label?
This is what's rendering for me at the moment, and I'm trying to get a tick between all the bars while showing the same number of labels https://cloud.highcharts.com/show/cLtfEDClS
First question:
You can merge this configuration into chart options in Cloud’s custom code section:
chart: {
events: {
load: function() {
var yAxis = this.yAxis[0];
this.xAxis[0].update({
offset: -yAxis.toPixels(Math.abs(yAxis.min), true)
});
}
}
},
Demo: http://jsfiddle.net/BlackLabel/6712zrod/
It automatically positions x axis so that it works as y = 0 line.
Second question:
Try setting X Axis[0] > Labels > Step to 1.
API reference: https://api.highcharts.com/highcharts/xAxis.labels.step
Explanation from Docs:
To show only every n'th label on the axis, set the step to n. Setting the step to 2 shows every other label.
By default, the step is calculated automatically to avoid overlap. To prevent this, set it to 1. This usually only happens on a category axis, and is often a sign that you have chosen the wrong axis type.
The space for xAxis generally is rendered dynamically by the Highcharts library and add the ellipsis in the correct place, making it display from the start and cutting it when it stop displaying it on the graph with some ellipsis.
When I try to change that space to not render dynamically, the property marginBottom does it,but it stops picking up when the text should start displaying and the start of the text is cutted from the down of the graph. Is there a way to render correctly the text at the bottom from the highcharts? I Do need it to be rotate 270 degrees, and not let the auto rotate work, and don't want to collapse more part of the graph just for displaying the text.
Here is a sample when that happes:
Highcharts.chart('container', {
chart: {
height: 350,
spacingBottom: 0,
marginBottom: 50,
type: "column"
},
series: [{
name: 'Total',
data: [1,2,3,4,5]
}],
xAxis: {
categories: ["very long name to test if the characters are rigth and cropped",
"Not so long but long enough", "I still am long and out of the screen",
"lets see how is cropped", "cropped", "crop"],
labels: {
rotation: 270
}
}
});
Sample fiddle with marginBottom : https://jsfiddle.net/ragmar/6ru4hze3/
If you remove the marginBottom, even the legend move down a bit.
It is possible to do this behavior? even including some css?
Thanks in advance
To make it work the way you want, you have to make some modifications in Highcharts core. For example you can do not use marginBottom option, but set fixed value as a commonWidth variable in renderUnsquish method:
if (attr.rotation) {
commonWidth = (
maxLabelLength > chart.chartHeight * 0.5 ?
40 : // changed from 'chart.chartHeight * 0.33'
maxLabelLength
);
if (!textOverflowOption) {
commonTextOverflow = 'ellipsis';
}
}
Live demo: https://jsfiddle.net/BlackLabel/moL1tw6c/
Is it possible to have a diagonal plotline in highcharts?
I have a line chart which tracks weightloss (y axis = weight, x axis = time), and I need a plotline which starts at the initial weight, and plots diagonally to the time when the user should have lost the weight by.
I can plot a simply flat plotline like this:
plotLines: [{
value: 0.696,
width: 3,
color: 'red',
dashStyle: 'dash',
label: {
text: 'Latest value',
align: 'right',
y: 5,
x: 0
}
}]
but, that's just a simple flat line.
Any ideas?
Easiest way is to simply use a separate line series.
Plot just your first and last point. You can disable markers, turn off mousetracking, and hide from the legend if you want it to behave just like a plotLine.
http://api.highcharts.com/highcharts#plotOptions.series.enableMouseTracking
http://api.highcharts.com/highcharts#plotOptions.series.marker.enabled
http://api.highcharts.com/highcharts#plotOptions.series.showInLegend
Plotlines can be horizontal or vertical, but you can use renderer to add custom line (like diagonal) in the chart: http://api.highcharts.com/highcharts#Renderer.path()
Using this example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
When you hover over points on the chart, you get a nice vertical line showing you which point you're currently on. I want to modify the click event so that the vertical line stays when I hover away after a click. Changing the line color would be ideal on click, but not necessary.
If I click another point I'd want to remove any previous lines. Any ideas on how I could accomplish this?
The above solution like I said, is really cool, but is kind of a hack (getting the path of the crosshair) into the implementation details of highcharts, and may stop working in future releases, may not be totally cross browser (esp since <IE8 do not support SVG, the adding path may still work as it should be handled by highchart's add path method, but getting the crosshair's path may not work, I may be wrong, am an SVG noob). So here I give you the alternate solution of dynamically adding plotLines. PlotLines also allow some additional features like dashStyles, label etc.
get the axis and x value of point clicked (may not exactly overlap the crosshair)
var xValue = evt.xAxis[0].value;
var xAxis = evt.xAxis[0].axis;
Or
EDIT If you want to have the plotLine at the location of the crosshair and not the click position, you can use following formula (No direct API to get this, obtained from source code hence may stop working if code changes)
var chart = this;
var index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft;
var xValue = chart.series[0].tooltipPoints[index].x;
Add plotline
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
You can cleanup existing plotline
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
OR
try {
xAxis.removePlotLine(myPlotLineId);
} catch (err) {}
Putting the pieces together
var myPlotLineId="myPlotLine";
...
var chart=this;
index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft;
var xValue = chart.series[0].tooltipPoints[index];
// var xValue = evt.xAxis[0].value; // To use mouse position and not crosshair's position
var xAxis = evt.xAxis[0].axis;
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
...
Add plot lines at click position # jsFiddle
Persist crosshair/cursor as plot lines on click # jsFiddle
You can do it in several ways
Highchart has a very cool renderer that allows you to add various graphics to the chart. One of the options is to add a path I will be illustrating the same here.
We shall reuse the path of the crosshair and add the same to the chart with some additional styles like color you mentioned. The path of the crosshair can be optained as this.tooltip.crosshairs[0].d this is in string form and can be easily converted to an array using the Array.split() function
click: function() {
this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
'stroke-width': 2,
stroke: 'red'
}).add();
}
This will accomplish adding the line. You can store the returned object into a global variable and then when you are about to add another such line, you can destroy the existing one by calling Element.destroy()
var line;
...
chart:{
events: {
click: function() {
if (line) {
line.destroy();
}
line = this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
'stroke-width': 2,
stroke: 'red'
}).add();
}
}
...
Persist tooltip / crosshair on click # jsFiddle
Assuming you don't have much meta data to be shown along with the line, this is the easiest (or the coolest :) ) approach. You can also attach meta data if you want to using the renderer's text object etc.
An alternate way could be adding vertical plotLines to the xAxis
UPDATE
Refer my other solution to this question, that would work with zoom,scroll,etc