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 want to disable or hide marked x-axis on the following image:
But I still need to be able to show a plot line.
I tried to play around with "xAxis" Highcharts property and I am able to hide marked x-axis, but then I can not add a plot line. It seems to me this axis is somehow connected with the plot.
Thanks a lot for help.
The plotLines are connected to an axis, but you can separately disable the grid and the labels:
xAxis: [{
...,
grid: {
enabled: false
},
plotLines: [{
color: 'red',
value: today + day * 7,
width: 5
}],
labels: {
enabled: false
},
tickLength: 0
}, {
visible: false
}]
Live demo: https://jsfiddle.net/BlackLabel/c2xLruvp/
API Reference: https://api.highcharts.com/gantt/xAxis.visible
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 have Flot line chart with two dataseries. I would like to edit the tooltips independently for each series. I have tried moving the tooltip settings to the dataset part but it didn't work.
Does anyone know a solution?
$(function () {
var barOptions = {
xaxis: {
tickDecimals: 0
},
yaxes: [{
position: "left"
}, {
position: "right"
}],
colors: ["#36c6d3"],
grid: {
color: "#888888"
},
tooltip: {
show: true,
content: "Uge %x, %s: %y"
}
};
var dataset = [{
data: occData.data,
label: occData.label,
yaxis: occData.yaxis,
lines: {
show: true,
lineWidth: 1,
}
}, {
data: houseData.data,
label: houseData.label,
yaxis: houseData.yaxis,
color: 'grey',
lines: {
show: true,
lineWidth: 1,
fill: false
}
}];
$("#flot-line-chart-past").plot(dataset, barOptions);
});
I'm going to presume that you are using flot.tooltip to provide the tooltips. In which case, the content property of the tooltip configuration object can be a function as well as a format string. I quote from the documentation for the plug-in:
you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.
So write a function that distinguishes between each label you use for the two series, and return a different format string for each.
Background
I have a HighCharts JS chart being updated every minute, but with the chart initially populated using the load event in the chart config.
My problem is that when I call addPoint on the series, the chart shifts all of it's data and leaves the chart with only the one new data point in the middle of the chart.
chart.series[0].addPoint(["Thu, 22 Sep 2016 13:21:58 GMT", 98], true, true)
chart.series[1].addPoint(["Thu, 22 Sep 2016 13:21:58 GMT", 64], true, true)
Here is what my chart looks like on loading the page...
Now here is what it looks like after addPoint...
EDIT - Chart configuration added
{
chart: {
type: 'line',
zoomType: 'x',
events: {
load: requestInitialData
}
},
credits: {
enabled: false
},
title: {
text: undefined
},
plotOptions: {
series: {
marker: {
enabled: false,
radius: 2
},
lineWidth: 2
}
},
series: [],
xAxis: {
labels: {
enabled: true
}
},
yAxis: {
min: 30,
max: 150,
startOnTick: false,
endOnTick: false
}
}
EDIT - Added JSFiddle Problem Click button once to add initial data and then subsequent clicks to see the problem
EDIT - Problem Solved It appears a bug was introduced into a recent version of HighCharts, since 4.2.2, which does work for me. 4.2.7 doesn't
Problem Solved...it was a bug in HighCharts 4.2.7 and possibly previous versions. Works in 4.2.2 though