I have a line on a chart with a marker (icon). Highcharts is hiding the icon based on some behavior I do not know about.
The code to add 'points' to my data series ('output') looks like (I know enabledThreshold is redundant, but had to try something) this:
output.push({
id: id,
data: points,
keys: ['x', 'y', 'marker'],
marker: { enabled: true, enabledThreshold: 0, },
color: 'transparent',
lineWidth: 1,
animation: false,
showInLegend: false,
enableMouseTracking: false,
});
Here is an image of the browser with the marker:
And this is what happens if I make the browser window just a little less wide:
The little red icon is gone (making the browser wider will bring it back). I want the icon there 100% of the time.
Thanks raf18seb, you nailed it. Unfortunately dataGrouping is enabled by default, so it is necessary to disabled it:
dataGrouping: {
enabled: false,
forced: false // not sure this is necessary but whatever
},
Generally I seem to have a lot of code over-riding highcharts default behaviors...
Related
Can someone help me to understand what is wrong here. Everything seems perfect.
http://jsfiddle.net/prakash4mail/nt86gj7z/1/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
borderWidth: 1,
data: [[2020-04-01, 18000, 29060],[2020-04-01, 18500, 9920],[2020-04-01, 19000, 32160],[2020-04-02, 18000, 12400],[2020-04-02, 18500, 91880],[2020-04-02, 19000, 54000],[2020-04-03, 18000, 63540],[2020-04-03, 18500, 43420],[2020-04-03, 19000, 43420]],
dataLabels: {
enabled: true,
color: '#000000'
},
}]
});
});
heatMap showing lines instead of squares
The exact answer is rowsize: 500 (from UI perspective - height, YAxis difference between each point) and colsize: 86400000 (one day each, x-axis difference between each point). Missing this was causing box not to appear.
As I understood you would like to achieve something like is rendered here: http://jsfiddle.net/BlackLabel/o6ywag42/
Notice how the data structure looks like in this demo from Highcharts demo base:
https://jsfiddle.net/BlackLabel/uofntb4y/ - if you want to keep the points as a square the 'y' value must be growing one by one, like here: http://jsfiddle.net/BlackLabel/o7bgq1pu/
And to show your truly y scale you can use the categories feature.
yAxis: {
categories: ['18000', '18500', '19000']
},
API: https://api.highcharts.com/highcharts/yAxis.categories
EDIT:
Another solution suggested by #prakash is to use the series.rowsize property and series.colsize to fit the squares.
API: https://api.highcharts.com/highcharts/series.heatmap.rowsize
API: https://api.highcharts.com/highcharts/series.heatmap.colsize
I am getting image from highchart server to add into my pdf. But when I eport an column chart the column bars are coming at below the x-axis and not on the axis itself. Below is demo url
https://jsfiddle.net/ztcv2rhj/6/
Highcharts.chart('column-container-print',{
chart: {
animation: false,
type: "column",
marginLeft: 80
},
credits:false,
title:{
text: "Top 5 Questions"
},
subtitle: false,
yAxis: {
allowDecimals: false,
min: 0,
} ,
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
xAxis: {
categories: ["Are the characters clear and readable? Keyboards should be kept clean. If characters still can't be read, the keyboard may need modifying or replacing. Use a keyboard with a matt finish to reduce glare and/or reflection.","Does the keyboard tilt? Note, the tilt need not be built in.","Does the user have good keyboard technique?","Is it possible to find a comfortable keying position? Try pushing the display screen further back to create more room for the keyboard, hands and wrists. Users of thick raised keyboards may need a wrist rest.","Is the keyboard separate from the screen?"],
labels: {
rotation: -45
},
},
series: [{"name":"No","data":[1,1,1,1,1]}]
});
This issue occurs because you are providing chart.options as options to export. Instead, you should provide chart.userOptions.
Code:
var optionsStr = JSON.stringify(chart.userOptions);
var dataString = encodeURI('async=true&type=jpeg&scale=4&options=' + optionsStr);
Demo:
https://jsfiddle.net/BlackLabel/6mw03r7c/
To ease graph readability, I've turned markers off on my highstock spline chart (markers : enabled : false). I also wanted to broke the graph in case of irregular interval between data and so I have successfully set the gapSize to 1. However, this has the bad side of hidding single data that are not linked from one side or an other.
Here's an example (you'll easily see that some of the points are hidden) : http://jsfiddle.net/qosdc6hr
series: [{
marker:{
enabled:false
},
gapSize: 5,
[...]
}]
I want to have these single points drawn on the chart to make them visible at first glance. Is there a way to do it?
You can enable marker for a specific point like this:
data: [
{ x: Date.UTC(1970, 9, 27), y: 0, marker: { enabled: true }},
live example: http://jsfiddle.net/3eco7Lmz/
I'm trying to add SMA (Simple moving average) into my highstock with dataGrouping.
dataGrouping works fine without SMA. But when I add SMA it only group data on daily basis. Has anyone got the same problem?
I've checked the chart element and I can see the series & SMA object they all got the dataGrouping attribute but still not display properly in the chart.
I tried to add dataGrouping in both plotOptions.series & plotOptions.sma or add it in series respectively but none of them work.
let dataGrouping = {
forced: true,
units: [
['week', [1]],
]
};
const options = {
//...
plotOptions: {
candlestick: {
color: 'green',
upColor: '#e00000',
},
series: {
marker: {
enabled: false,
},
states: {
hover: {
enabled: true,
lineWidth: 1.5,
}
},
dataGrouping,
},
sma: {
dataGrouping,
}
},
}
My highcharts verion is 6.0.7
I also tried to add dataGrouping on an official example and here's the link: http://jsfiddle.net/tuuz4yho/8/
and here's another example with a simple line chart
https://jsfiddle.net/Lyf6vzev/19/
But dataGrouping still not work on SMA lines.
Anyone know how to group SMA weekly or monthly?
Really need your help!
Thanks! :)
Turns out it's a known bug:
https://github.com/highcharts/highcharts/issues/7823
The workaround is setting dataGrouping.approximation and dataGrouping.groupPixelWidth in the indicator config.
Please take a look at JSFIDDLE. Here, the green bar doesn't display any value. I know adding overflow:"none", crop:false will display the value. But it goes out of plotting area, sometimes for larger numbers it overlaps title. I would like to get green bar value (ONLY) inside the bar instead of hiding the value.
For particular column (i.e green column) label value to be inside, you can add attribute inside: true in data .Refer dataLabels.inside for more info
series: [{
color: colors[0],
showInLegend: false,
data: [{
....//first value
, {
y: 3500,
name: 'Second',
color: colors[1],
dataLabels: {
inside: true //labels will be inside column
}
},... // third and remaining
});
Fiddle demonstration