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/
Related
I have common x axis for all 3 charts. Want to show X-axis label only for the last chart selected. I wouldn't know exactly how many chart I would select. So this has to be dynamic.
I tried below:
I initially disable x-axis label for all charts. Need to enable x-axis label only for the last chart selected(Which would be the bottom most chart).
document.querySelectorAll('#checkboxes input').forEach(function(checkbox) {
checkbox.addEventListener('change', (e) => {
const id = e.target.dataset.id,
checked = e.target.checked,
checkedCheckboxes = document.querySelectorAll('#checkboxes input:checked').length,
node = document.querySelector(`#chart${id}`);
const chartEps = [
chartEp1,
chartEp2,
chartEp3,
]
console.log("id", id)
//chartEps[id].xAxis[0].options.labels.enabled = true
// The ID has to be the id of last chart selected. So that only for last chart xAxis label is enabled.
chartEps[id].update({
labels: {
enabled: true
},
});
Please see fiddle: https://jsfiddle.net/xhLt6a01/8/
Instead of dynamic x axis label, I also tried setting empty chart with x axis which need to shown at all times at the bottom (commented code at the bottom of fiddle).
But couldn't get both options to work. I would really appreciate If I could get any help on this.
To dynamically enable/disable the labels, in the update call, set the option xAxis, but (somehow unexpectedly) it should be at the top level of the options object, at the same level as chart:
Highcharts.charts.forEach(function(chart, i) {
chart.update({
chart: {
height: height / checkedCheckboxes
},
xAxis:{
labels: {
enabled: ...your boolean criterion here for chart i...
}
}
});
});
For the particular case when you want to enable the axis only for the last shown chart I'd use something on lines of
{enabled: selected[i] && selected.indexOf(true, i+1) === -1}
where selected is an array that keeps track on selected checkboxes, that is equivalent to shown charts. Take a look at this fiddle for a modified version of your original code.
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
I have a column chart in Highcharts with a big number of columns so the columns are very small.
That's fine but I want to do zoom.
So I used zoomtype: 'x' and it work well.
The problem is that I want to make the font bigger on the xAxis when they are selected.
I tried by doing this:
chart: {
type: 'column',
zoomType: 'x',
events: {
redraw: function(event) {
if(this.xAxis[0].tickPositions.length>80){
this.xAxis[0].options.labels.style.fontSize = 1;
}else{
this.xAxis[0].options.labels.style.fontSize = 20;
console.log(this.xAxis[0].options.labels.style.fontSize);
}
}
}
}
When I check the console the value of this.xAxis[0].options.labels.style.fontSize is updated to 20.
This code works only when I press the Reset zoom button.
So my question is how can I update the chart when the event is triggered so it takes the same effects as if I use the Reset zoom button?
Or how can I make changes in the font when I make zoom and when reseting the zoom?
You can catch afterSetExtremes event and then axis.update() with new styles for bales.
events:{
afterSetExtremes:function(){
this.update({
labels:{
style:{
fontSize:20
}
}
});
}
}
Example: http://jsfiddle.net/m180dxsu/
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)