i'm looking for an example of a drilldown on large heatmap of highcharts for a csv data?
first, a large heatmap is created using csv data. I should be able to select a part of the heatmap and drilldown further to see the details.
It behaves the same way other drill down chart works, Probably you can go through this sample
You have to set a drilldown series by parsing the csv data
drilldown: function (e) {
if (!e.seriesOptions) {
}
HEATMAP DEMO
Related
I am trying to plot the chart as shown below
Not sure what to search for as this is a combination of three charts on same chart.Any starting point will help
To achieve the chart like that, you can use the Highcharts Stock with combination of three series:
line, flags and column.
Sample demo you can base on:
https://jsfiddle.net/BlackLabel/87tbj5x2/
API Reference:
https://api.highcharts.com/highstock/series.line
https://api.highcharts.com/highstock/series.flags
https://api.highcharts.com/highstock/series.flags.shape
https://api.highcharts.com/highstock/series.column
I work in angular project and use highchart.
The situation is:
At my chart, I have single series, type area.
I wanted the yAxis grid line to be displayed above my series, so I give it: gridZIndex: 10.
The problem is:
The yAxis is displayed also above the series markers, and I want it to appear only on the series area and line, not on markers.
Any solution?
Please the the demo that I draw:
There is no solution for this case using the regular API options because Z index in SVG is defined by the order the elements appear in the document. You can try to manipulate the DOM, however, this solution might not work well for all cases - like dynamic chart changes, so just keep in mind this is more like a POC then a solid fix.
Demo: https://jsfiddle.net/BlackLabel/8p1smf05/
chart: {
polar: true,
type: 'line',
events: {
load() {
this.seriesGroup.element.insertBefore(
this.yAxis[0].gridGroup.element,
this.series[0].markerGroup.element
)
}
}
},
API to the load event: https://api.highcharts.com/highcharts/chart.events.load
I have 1 chart with 2 scatterplot series like so
The series have same data points, basically I am drawing 2-2D plots instead of 1-3D plot..
Series 1 has the legend while on 2 its disabled. When I hover my cursor over the legend I want the tooltip to show up in both the chart, so a user can correlate legend to points on scatter plots.
$('.highcharts-legend text, .highcharts-legend span').each(function (index, element) {
$(element).hover(function () {
chart.tooltip.refresh([chart.series[index].data[0], chart.series[index+data.length].data[0]]);
}, function () {
chart.tooltip.hide();
})
});
I use above code to create desired effect, but tooltip is not appearing at the right place. maybe its a limitation from highchart. It throws the following JS error
Could someone please suggest me a workaround?
If you could make the chart.tooltip.refresh to function properly that would be the best. Other wise I am willing to make a compromise with at-least having the points in both series in hovered state and 1 of them showing the tooltip.
here is a fiddle to see the problem in action https://jsfiddle.net/9eoyg283/1/ , Hover over the legend items and you would get JS error in the console.
I can create the desired effect if I create 2 charts instead of using 2 series, but then that complicates other things which are not desirable. So this solution is off
Thanks in advance
I use Highchart to display an inverted graph with multiple series.
an HighStock chart should be better for what I need but I had to use it with the inverted option that is available only in HightChart.
How can I display a comparator line following my cursor on my multiple series chart ?
( like in this example from HighStock )
secondary question : why is it so many differences between highstock and highcharts ?
would be perfect to use the better of those two worlds together.
Ok I've found it.
using the tooltip shared option as:
tooltip: {
shared: true,
crosshairs: true
}
it works great on inverted charts too, the misunderstood was because this setting is enable by default in HighStock graphs.
My goal is to have an arearange chart with bolded only top "border" with additional markers just on hover. I was trying to achieve with just one arearange graph, but I think it is not possible with arearange chart (linewidth works for both bottom and top border, and I am not able to show marker at all...). I have decided to go on with additional spline chart that would exactly overlap the top border of arearange chart. I have provided the working example in here:
in jsfiddle go to check: /ZvZDZ
As you can see on the top of the chart, spline graph does not exactly over lap the arearange chart, although data is this same.
Is there a way to fix that, so those both graphs would overlap
maybe there is a way to use just arearange chart without spline chart?
any help would be appreciated
I think you should use or:
line series and arearange
spline series and areasplinerange
Just mixes spline and arearange will provide example you can see. Unfortunately using only one arearange series is not possible - markers are disabled.
Example: http://jsfiddle.net/ZvZDZ/2/
Code:
series: [{
type: 'areasplinerange',
name: 'areasplinerange',
data: areaData,
marker: {
enabled: true
}
}, {
type: 'spline',
name: 'spline',
data: splineData
}]