I want to create a linechart with HighCharts that has a plotband along every point of the line. Like so: https://imgur.com/a/WVj7uJb
(They are using HighCharts as well, so it must be possible).
However, I can't seem to manage getting it for every point specific. Whenever I add plotbands, it just draws a band using the highest and lowest point like so: https://imgur.com/a/PZdKIBz
How I currently render the chart (note the plotbands part):
Highcharts.chart('chart', {
chart: {
type: 'line',
},
title: {
text: `${this.variable}`,
},
credits: {
enabled: false,
},
xAxis: {
type: 'category',
title: {
text: "Date"
},
},
yAxis: {
title: {
text: this.unit
},
plotBands: [
{
color: "orange",
from: 12,
to: 14
},
{
color: "orange",
from: 10,
to: 13
} // and so on.
]
},
tooltip: {
headerFormat: `<div>Date: {point.key}</div>`,
pointFormat: `<div>${this.unit}: {point.y}</div>`,
useHTML: true,
},
series: seriesList,
} as any);
So exact example would render a plotband from 10 to 14 along the whole linechart, instead of to different points: one from 12 to 14, and one from 10 to 13.
Any ideas as to how I can accomplish this? I have seen something with 'path', but I can't find anything about it.
Thanks in advance.
In that case, you should use arearange series instead of plotBand.
Demo:
https://www.highcharts.com/demo/arearange-line
API Reference:
https://api.highcharts.com/highcharts/series.arearange
I have a graph that monitors the traffic of people visiting a website and it currently shows all of it's data no problem:
Every month or so I update and send out a newsletter to people that are subscribed to me and I want to know if there is a way to show on that graph the time that those newsletters came out.
So if I was looking at the past week of site-traffic in my graph and my newsletter was sent out on Monday, a line would appear on that day on the graph:
I know I can sort of do this with markings, a way to add lines to a graph in flot that already exists
{ xaxis: { from: 1, to: 2 }, color: "#000000" } //Creates a vertical line from 1 to 2
But that doesn't seem to work the same when you have time mode enabled. E.g. The parameters I'm giving it for markings won't show up when time mode is on
So my question is: How do I add a marking to the graph that appears on a specific date with flot?
EDIT
$.plot("#chart_filled_blue", data1, $.extend(true, {}, Plugins.getFlotDefaults(), {
xaxis: {
min: start,
max: end,
mode: "time",
tickSize: [1, type],
tickLength: 0
},
series: {
lines: {
fill: true,
lineWidth: 1.5
},
points: {
show: true,
radius:4,
lineWidth: 1.1
},
grow: { active: true, growings:[ { stepMode: "maximum" } ] }
},
grid: {
hoverable: true,
clickable: true,
markings: [{
xaxis: {
from: 1530421200,
to: 1530507600
},
color: "#000000"
}]
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
}
}));
Markings work just fine in flot with time axes. Can you post some code to help understand the issue better?
You'll have to set the marking from and to to the timestamp you want the marking to appear:
grid: {
markings: [{
xaxis: {
from: 1336201200000,
to: 1336201200000
},
color: "#ff0000"
}]
}
This JSFiddle has a working example of a time series axis and markings.
I'm having an odd problem where my Highcharts graph is only properly "graphing" on Chrome. The graph frame itself shows up just fine (the axis' names, labels, white background, etc), but the actual columns do not get animated, nor do they show up on the graph to represent the actual data. It just appears to look like an empty graph.
The data is being called via AJAX. Everything on that end is fine. The code itself is also very simple, so not sure what could be causing this. Here is the code, any help would be greatly appreciated:
Highcharts.chart('modal-graph-wrapper', {
chart: {
type: 'column'
},
title: {
text: 'Build Time vs. Step'
},
yAxis: {
title: {
text: 'Length of Time (seconds)'
},
categories: timeArray
},
xAxis: {
categories: nameArray
},
plotOptions: {
series: {
pointStart: 0
}
},
series: [{
name: 'Build Time (seconds)',
data: timeArray,
lineWidth: 3,
marker: {
radius: 3,
fillColor: '#337ab7'
}
}]
});
I ended up figuring it out. It is because the Date.parse function does not work as expected in Firefox or Safari; whereas in Chrome it works as anticipated. Restructuring the time format solved my issue. Thanks!
I'm creating a HighStock column bar chart. I have enabled the scrollbar using scrollbar: enabled. The scrollbar works fine for smaller datasets, but this dataset has a lot of categories(I've only included half as many as I need). For some reason, after a certain number, the rects for the bar chart won't properly show(or show wrong values) and the xAxis labels display as numbers rather than their actual names. Also, I'm trying to add IDs to each of the bars to add click events, but it only adds IDs to bars that are properly rendered initially. I have also noticed that I can properly add IDs even with a scrollbar to smaller data sets because all of the rect elements are properly rendered. Is there any way to make this scrollbar work for larger datasets?
You'll see what the problem described above looks like in this link:
https://jsfiddle.net/sauravvenkat/96ue59qy/
Highcharts.chart('container', {
chart: {
type: 'column',
color: 'rgb(245,111,35)',
},
title: {
text: 'Physicians By Specialty'
},
subtitle: {
text: 'Source: Physician Specaialty'
},
xAxis: {
type: 'category',
title: {
text: null
},
scrollbar: {
enabled: true
},
// min: 0,
max: 7,
tickLength: 0,
labels: {
rotation: -60
}
},
yAxis: {
title: {
text: 'Profiles',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Totals',
color: 'rgb(245,111,35)',
data: [["Spec1",1000],["Spec2", 1000], ["Spec3",500],["Spec4",300],["Spec5",1000],["Spec6", 1000], ["Spec26",500],["Spec27",300],["Spec28",1000],["Spec29", 1000], ["Spec30",500],["Spec31",300],["Spec32",1000],["Spec33", 1000], ["Spec34",500],["Spec35",300],["Spec36",300],["Spec37",300], ["Spec38",300], ["Spec39",300], ["Spec40",300], ["Spec41",300], ["Spec42",300], ["Spec43",300], ["Spec44",300], ["Spec45",300], ["Spec46",300],["Spec47",1000],["Spec48", 1000], ["Spec49",500],["Spec50",300],["Spec51",1000],["Spec52", 1000], ["Spec53",500],["Spec54",300],["Spec55",1000],["Spec56", 1000], ["Spec57",500],["Spec58",300],["Spec59",300],["Spec60",300], ["Spec61",300], ["Spec62",300], ["Spec63",300], ["Spec64",300], ["Spec65",300], ["Spec66",300], ["Spec67",300], ["Spec68",300], ["Spec",300],["Spec24",1000],["Spec25", 1000], ["Spec26",500],["Spec27",300],["Spec28",1000],["Spec29", 1000], ["Spec30",500],["Spec31",300],["Spec32",1000],["Spec33", 1000], ["Spec34",500],["Spec35",300],["Spec36",300], ["Spec44",300], ["Spec45",300], ["Spec46",300],["Unknown",250]]
}]
});
It happens because the number of points in series is bigger than the default value of the cropThreshold property (more about below, in the API Reference section). As a solution, set the property with the bigger value.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.column.cropThreshold
Example:
https://jsfiddle.net/q8pn2dwf/
I am trying to change the default zoom level on a simple highstock chart. I've been looking around for a solution and came up with this:
rangeSelector: {
selected:0,
},
This did not work with the code below
chart = new Highcharts.StockChart({
chart: {
renderTo: 'dummycontainer'
},
rangeSelector: {
selected:0,
},
credits: {
enabled: false
},
yAxis: {
title: {
text: ''
},
max: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>', //({point.change}%)
valueDecimals: 2
},
series: [{
name: 'MMP',
data: [
],
marker : {
enabled : true,
radius : 3
},
shadow : true
}]
});
What could be causing this?
rangeSelector: {
selected:0
}
very much works
Change default time range | Highchart & Highstock # jsFiddle
Check for any other javascript related errors in your browser's javascript console. If you are trying out on IE or even otherwise I would recommend removing the trailing comman(,) from selected:0, like in the code above or the demo.
Trailing commas lead to invalid json and some browsers may not behave correctly with them. You can validate your json # http://jsonlint.com/ or try the JSLint option in jsFiddle.