Suppose I add some vertical lines labeling with different names. Now I want to delete any line by clicking on the line. How do I do that...someone please help. Thanks in advance.
Here is what you can do to click a plotLine and have it instantly removed:
In the xAxis config, add a plotLine with a click event:
xAxis: {
plotLines: [{ // mark the weekend
id: 'plotLine1',
color: 'red',
width: 2,
value: Date.UTC(2010, 0, 4),
events: {
click: function(e) {
this.axis.removePlotLine(this.id)
}
}
}],
tickInterval: 24 * 3600 * 1000,
// one day
type: 'datetime'
},
Here is a fiddle to show it work: Click Here
To get rid of the grid lines, you can just color them transparent inside the yAxis config:
yAxis: {
...
gridLineColor: 'transparent',
}
Edit for new Question: To remove the lines in this example, you can just add the event config to the new plotLines - like this:
// Inside chart event click function:
chart.addPlotLine({
value: event.xAxis[0].value,
color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
width: 2,
// added label to id so the id is unique:
id: 'vertLine_'+label,
zIndex: 9999,
// added plotLine event click - same as before.
events: {
click: function(e) {
this.axis.removePlotLine(this.id);
}
},
label : {
text : label
}
});
Also, it looks like you're trying to make the chart NOT add a label if there is no text entered by the prompt. To do this, I would recommend adding a condition && label != '' to your if-statement so in total it looks like if(label!=null && label != ''). I got this tip from This site.
Here is the updated fiddle: Click Here.
Note: to successfully click on the line every time, aim for the left side. Idk why, but this worked better for me. Hope this helps!
You can also catch click event by custom-events plugin and destroy SVG element (line+label)
Related
I am facing a rather troublesome problem with chart as follows:
I want to remove the outermost border and keep the inner lines, but the chart doesn't allow me to do that. I tried using 'drawBorder: false', but it still doesn't work. Is there any way to handle this?
How to remove the value of the origin x-Axis and Y-Axis?
please refer to the image
How to edit the value of A-Xis? I want it to increase by 1000 each time on the X-Axis.
image
Setting the scales option like this:
scales: {
y: {
grid: {
drawBorder: false, // <-- this removes y-axis line
lineWidth: function (context) {
return context?.index === 0 ? 0 : 1; // <-- this removes the base line
}
}
},
x: {
grid: {
drawBorder: false,
lineWidth: 0 // <-- this removes vertical lines between bars
}
}
}
should achieve the desired look. Check out this code sandbox with an example.
You can find more information about styling the chart here.
I used area range Highcharts but facing certain issues as:
For X-axis, the chart doesn't start with an initial point rather shows incorrect start tick value(i.e. 2020) instead of 2019.
Need to show label values for last data point only for each series, attached image below for reference
Could someone please help me with what do I do to resolve my issues.
Thanks in advance!
For the 1st issue, I tried changing the 'pointStart' attribute value for plotOptions->series but didn't work.
"plotOptions": {
"series": {
"pointStart": 1546300800000
}
}
Here is JSFiddle link of the chart containing code:
The first issue can be resolved by setting xAxsi.tickInterval = plotOptions.series.pointInterval:
xAxis: {
type: "datetime",
tickInterval: 31536000000
...
}
The second issue can be resolved by providing labels formatter callback function that will return only the last series point value. Also, other dataLabels properties have to be set properly (like align, overflow, etc). Check demo and code posted below.
Code:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'middle',
padding: 8,
allowOverlap: true,
overflow: 'allow',
crop: false,
formatter: function() {
var point = this.point,
series = this.series;
if (series.data.length === point.index + 1) {
return '$' + this.y.toFixed(1);
} else {
return '';
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/2xLevj6y/
API reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#formatter
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#align
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#overflow
For my graph, I have a single y-axis (y1), and I am trying to add a second axis (y2) which is a scaled version of y1.
Simply put, is it possible to do a graph like this. But I want a second axis, with the same scaling ratio, but in different units (i.e. that is multiplied by some k).
I have tried to just change the label on the yAxis:
` labels: {
format: '$ {value* price} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},`
But this hacky way does not seem to work for me.
In my case, I have a graph of percent change on y1, is it possible to put the price on y2?
I do not want to add another set of lines since I am already using 10, which would mean I would need 20 lines in total
Any help would be greatly appreciated!
You need to link the second axis to the first by linkedTo property and use formatter function to display some custom scale:
yAxis: [{}, {
opposite: true,
labels: {
formatter: function() {
return this.value * 1000
}
},
linkedTo: 0
}]
Live demo: http://jsfiddle.net/BlackLabel/j83pghta/
API Reference:
https://api.highcharts.com/highcharts/yAxis.linkedTo
https://api.highcharts.com/highcharts/yAxis.labels.formatter
Good afternoon, I'm putting together a chart that uses Highcharts stackLabels, it's exactly the same as this: JSFiddle however I do not want it to display the sum of the column values, I want it to appear item by item one on top of the other, same as the print I simulated below:
In order to set your stackLabels as you expecting, you need to use stackLabels.formatter function to calculate the labels values manually.
Next thing you've to do is make a little shifting on the labels. You are able to do it by stackLabels.y field.
At the end, don't forget about the stackLabels.useHTML parameter set equal to true. It makes the <span> and </br> elements will appear correctly. Please take a look at code below:
yAxis: {
stackLabels: {
style: {
color: 'red'
},
enabled: true,
useHTML: true,
formatter: function() {
var firstLabel = Math.round((this.points[0][1] - this.points[0][0]) * 10) / 10,
secondLabel = this.points[0][0]
return `<span>${firstLabel}</span></br>
<span>${secondLabel}</span>`
},
y: -15
}
}
You can read more about parameters mentioned above here:
https://api.highcharts.com/highcharts/yAxis.stackLabels.formatter
https://api.highcharts.com/highcharts/yAxis.stackLabels.y
https://api.highcharts.com/highcharts/yAxis.stackLabels.useHTML
Live example: http://jsfiddle.net/r01nkgyn/
I need to change the threshold value on click of rangeSelector in HighStock graph.
Also, I need to change the line value inside PlotLines of y-axis.
I tried following code
xAxis: {
events:{
setExtremes: function(e) {
if (e.trigger == "rangeSelectorButton" &&
e.rangeSelectorButton.text == "1m"){
// this.threshold = 20;
alert("on click of 1m range selector");
// for threshold value
this.threshold=20;
this.series[0].plotOptions.threshold=20;
this.plotOptions[0].series[0].threshold=20;
this.rangeSelector.clickButton(0, true);
// for changing the line value of plotLines
this.yAxis[0].plotLines[0].value=20;
}
},
}
},
Click here for jsfiddle link
I have put some alert to test that click on rangeSelector is working fine.
I tried to change the values but the chart is not getting updated.
Any help would be really appreciated.
Inside setExtremes, this references the xAxis object. The threshold is on the series object, so you need to get a reference to the right series.
var series = this.chart.series[0];
Then, you need to update it with the new value.
series.update({threshold: threshold}, false);
I'm passing false for the redraw parameter, since we're also going to update the plotLine, and we'll only want to redraw once.
For the plotLine, you'll need a reference to the yAxis.
var yAxis = this.chart.yAxis[0];
And, then you'll need to pass the new plotLine settings to the update method.
yAxis.update({
plotLines: [{
value: threshold,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter minimum'
}
}]
});
https://jsfiddle.net/w6bzohgd/3/