When I just draw the graph with 'spline', the yaxis interval is resaonable so the graph look's good.
The code is as follows:
chart: {
type: 'spline'
}
But, when I change the type to 'area', the interval is changed too. Therefore, the graph look's bad.
chart: {
type: 'area'
}
How can I fix it without setting label's 'min' and 'tickInterval'
I need this becuase if I set the label property, there would be followed bunch of works.
One way you can achieve this, is by using the following function that triggers on the event load:
chart: {
type: 'area',
events: {
load: function() {
let chart = this;
let tmpMaxMin = chart.yAxis[0].getExtremes();
chart.yAxis[0].setExtremes(tmpMaxMin['dataMin'], tmpMaxMin['dataMax']);
}
}
},
Working example: http://jsfiddle.net/ewolden/La13rjwf/
API on events.load: https://api.highcharts.com/highcharts/chart.events.load
API on getExtremes: https://api.highcharts.com/class-reference/Highcharts.Series#getExtremes
Answer based on: https://stackoverflow.com/a/35870891/8376046
Simply set softThreshold property to true.
API Reference:
https://api.highcharts.com/highcharts/plotOptions.area.softThreshold
Example:
http://jsfiddle.net/srx8py4v/
Related
I'm importing a csv file using Highcharts cvsURL for a line chart. I'm using styledMode and I defined the default colors. Highcharts is using my stylesheet. Is there an easy way to tell each series which color to use?
I have lots of lines, so highcharts cycles through its 10 default colors. I need one of the colors to only be assigned to 2 specific series though.
Here is my code so far:
Highcharts.chart('container', {
chart: {
type: 'line',
styledMode: true //this totally separates the design from the svg.
},
data: {
itemDelimiter: ',',
csvURL: 'http://deq.at.utah.gov/wp-content/themes/deq/parts/charts/Ozone-4th-Highest-8hr-Front.csv'
},
title: {
text: 'Ozone 4th Highest 8-hr Concentration Wasatch Front'
},
yAxis: {
title: {
text: '(Ozone PPM)'
}
}
});
I think the API said something about assigning classes to a series. Maybe that would work because I could make custom CSS for only those series, but I can't see how to do that using csvURL.
You can define color or className for series in this way:
data: {
csvURL: '...'
},
series: [{
color: '#00c735'
}, {
color: '#c4392d'
}]
Live demo: https://jsfiddle.net/BlackLabel/kj9udgat/1/
API Reference:
https://api.highcharts.com/highcharts/series.line.className
https://api.highcharts.com/highcharts/series.line.color
I have created my own master-detail chart following the Highcharts docs and this example: https://www.highcharts.com/demo/dynamic-master-detail
Eveything works fine but I would like to add a feature: When the chart is loaded the last 50 data points should automatically be selected in the master chart and thus shown in the detail chart.
I tried to manually trigger the selection event but it did not work out. Any idea how to solve this?
You can fire selection event in chart load event and set correct extremes:
chart: {
...
events: {
load: function() {
var points = this.series[0].points,
xAxis = this.xAxis[0];
Highcharts.fireEvent(this, 'selection', {
xAxis: [{
min: points[points.length - 51].x,
max: points[points.length - 1].x
}],
});
},
selection: function(event) {
...
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/xy8qug9h/
API: https://api.highcharts.com/highcharts/chart.events.load
I want to draw a line on a ohlc chart, but i dont want the new series to introduce gaps.
The first series (ohlc) should still place the candles in an nica way with constant gaps between them regardles of open-close times (i think its only the "ordinal" value that does this, but unfortunatelly you cant specify it at series level, but only axis level).
xAxis: {
ordinal: true
},
example:
http://jsfiddle.net/5r97owky/8/
Thank you for any help
The gaps are caused by ordinal option. You can create additional xAxis for line series:
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
var xAxes = this.xAxis,
extremes = xAxes[0].getExtremes();
xAxes[1].setExtremes(extremes.min, extremes.max, true, false);
}
}
},
xAxis: [{}, {
visible: false
}],
...
});
Live demo: http://jsfiddle.net/BlackLabel/1mbo2zp4/
API: https://api.highcharts.com/highstock/xAxis.ordinal
I have three highcharts containers on the same page and want to create a function which is available to all charts, so I have defined the function in setOptions. The function is working well but I don't know which graph has triggered the event.
How do I know which chart triggered the event?
plotOptions: {
series: {
cursor: 'pointer',
allowPointSelect: true,
point: {
events: {
select: function () {
alert($(this).attr('id')); // I need this to be the chart id
}
}
},
Two ways:
use this.series.chart.options.chart.renderTo to get string you have passed when creating chart
use this.series.chart.renderTo.id to get ID's string, (will be the same as above).
You can use this.series.chart to get the chart object that was clicked. I'm not sure how you're assigning an "ID" to your chart, but presumably having a handle to the chart itself will be sufficient.
In a scatter HighCharts plot, I want to set some properties only for some data points of my series. Here is a toy example:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
type: 'line',
data: [[1,1],
{x:3,y:2,marker:{enabled:false}},
[4,1]]
}]
});
});
});
I need (in decreasing order of priority) the second point to NOT have:
the marker (already done in my code, working);
the tooltip (tried but without success, I don't know how to do it working)
the line coming from previous point (tried but without success, I don't know
how to do it working)
Here is a jfiddle version.
For your second point, improvised from a similar answer:
Disable tooltip on certain points in Highcharts
tooltip: {
formatter: function() {
if (this.point.x != 1) { //enable for each point except the second point
return this.x;
}
else return false;
}
}
for your third point you might try to use a trick. If you set the y value as null, that point won't be displayed in the line. So draw your line, and enter two data with null y values to create a lonely point on the chart.
Here is an example: http://jsfiddle.net/8U8nx/14/