I not only want my legend to contain series' names, I also want it to contain name of my other items like my plotline. Here is my code:
plotLines: [
{
color: 'red',
dashStyle: 'shortdash',
value: response.AverageTime,
width: 2,
label: {
text: response.PlotLineName,
x: +10,
y: +30,
rotation: 360,
color: 'red'
}
}
]
So I want my plotline's name which is "Average Velocity Deviation" looks like in the legend box like below. How can I achieve that?
You can create an empty series which mimics the characteristics of the plot line (color, dash style...). You can then optionally use the legendItemClick event to "link it up" to the plot line.
For example, you predefine these variables for ID and plot line options:
plotLineId = 'myPlotLine'; // To identify for removal
// Plot line options for adding
plotLineOptions = {
color: '#FF0000',
id: plotLineId,
width: 2,
value: 5.5,
dashStyle: 'shortdash'
};
Your axis plotline:
xAxis: {
plotLines: [ plotLineOptions ]
}
Your mimic series:
series: [
// ...
{
// Series that mimics the plot line
color: '#FF0000',
name: 'My plotline',
dashStyle: 'shortdash',
marker: {
enabled: false
},
events: {
// Event for showing/hiding plot line
legendItemClick: function(e) {
if(this.visible) {
this.chart.xAxis[0].removePlotLine(plotLineId);
}
else {
this.chart.xAxis[0].addPlotLine(plotLineOptions);
}
}
}
}
]
See this JSFiddle demonstration of how it works (or this minimal example, without events).
Just as an alternative, if you're going to go so far as to make a fake series that mimics all of the aspects of your plot line...
You can just use that series as your plotLine, and skip all of the extra work of tying everything together...
like:
{
name: 'Plot Line',
color: 'red',
type:'line',
dashStyle: 'shortdash',
lineWidth: 2,
data: [[minXvalue, plotLineValue], {x:maxXvalue, y:plotLineValue, dataLabels: { enabled: true }}]
}
Example:
http://jsfiddle.net/jlbriggs/3d3fuhbb/74/
Related
I have a chart which has part line and part area stacked. In the first part (area) I want to add an inline legend as it is shown in this example (ie where it says Asia)
https://www.highcharts.com/demo/area-stacked-percent
These are the example options but I do not see how to specify that or if this is the default way to show legends in this plot
In my example, I cannot put the legends inside the area part. Tried to add title in yAxis. I also tried to add an annotation but it did not work:
https://jsfiddle.net/hkpna40r/1/
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 4
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: Date.UTC(2019, 11, 2),
y: 3
},
zIndex:100,
text: 'Arbois'
}],
}],
You can achieve what you want by attaching a module called series-label and set plotOptions.area.label like that:
plotOptions: {
area: {
label: {
enabled: true,
onArea: false
}
},
line: {
label: {
enabled: false
}
}
}
Note, annotations also work but you have to attach annotations module separately.
Demo:
https://jsfiddle.net/BlackLabel/5utLhenb/
API reference:
https://api.highcharts.com/highcharts/plotOptions.area.label
https://www.highcharts.com/docs/advanced-chart-features/annotations-module
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.
I have a function that adds another axis and serie to chart dynamically. It used to work well in Highcharts 3. Then i upgraded to Highcharts 4, but it adds axis but does not add serie.
chart.addAxis({ // Secondary yAxis
id: tempId,
title: {
text: tempName
},
lineWidth: 2,
lineColor: serie.color,
opposite: opposition
});
var lbl = getLabelStatus_<?=$id?>(id);
chart.addSeries({
name: tempName,
type: serie.type,
color: serie.color,
yAxis: tempId,
data: serie.data,
dashStyle: serie.options.dashStyle,
dataLabels: {
enabled: lbl,
rotation: serie.options.dataLabels.rotation
}
});
Did they change something about axis in v4? How can i solve this problem?
Try ;
data : serie.options.data,
I am using HighCharts combination chart to compare a forecast value(indicated by line) and a cumulative value (indicated by column). The cumulative value keeps increasing weekly and I want to be able to see if it reaches the predicted forecast value.
I created a graph in this js fiddle, http://jsfiddle.net/aroauy4t/ .
I have shown the js code below.
$(function () {
$('#container').highcharts({
title: {
text: 'Forecast Vs Cumulative chart'
},
xAxis: {
categories: [' ', ' ', 'Bananas', ' ', ' ']
},
labels: {
items: [{
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Cumulative',
data: [0, 0, 5, 0, 0]
}, {
type: 'line',
name: 'Forecast',
data: [3, 3, 3, 3, 3],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
});
But the tooltip content overflows when the x axis doesn't contain a label like in the image shown below.
How can I get the tooltip to behave without any overflow (like in the image below)
You could also make use of tooltip - useHTML property.
When turned on the tooltip is rendered as excepted.
tooltip: {
useHTML: true
}
http://jsfiddle.net/aroauy4t/2/
I got it to work (I don't know HighCharts very well) by using the following in your js fiddle:
categories: ["\u00A0", "\u00A0", 'Bananas', "\u00A0", "\u00A0"]
00A0 is the unicode character for non-breaking space.
Maybe it will work for you.
Can you please take a look at This Demo and let me know how I can get rid of the Series 1" index!
and have actual index for the two columns or if not possible simply remove it from the chart?
I also didn't get the way that YAxis is adding Ticks to chart! Is there any way to specify the number of Ticks and Max, Min Values?
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Green', 'Pink']
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 500
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
}]
});
});
You can remove the legend by adding this object to the container (right after series)
legend: {
enabled: false
}
You can set the tick interval on the yAxis like so:
yAxis: {
tickInterval: 25
}
It's all documented here: http://api.highcharts.com/highcharts
I encourage you to read it and experiment with the examples in-line.
It looks like that column grafs don't support legend. If you want remove it just write under initialize
$(function () {
$('#container').highcharts({
....
....
....
});
$('.highcharts-legend').remove();
});
It should work. :)