I'm using highchart to show some text next to a plot line on the xAxis. I would like to customize each label from a formatter function as it is possible on every other labels in the chart.
I've seen another topic on this matter but they're using TypeScript and I don't.
What I'm doing is :
vay chart = new HighChart({
...
xAxis: {
plotLines: [{
id: "plotLines",
zIndex: 15,
color: myColor,
width: 1,
value: theXvalue, //x value where to show the line
label: {
formatter: function () {
return " VAL > "+this.value;
}
},
}]
},
...
});
If I set the 'text' value in the label it shows up and it works like a charm.
Any help to use a formatter for those labels ?
Unfortunately you cannot use formatter, you should define content of label in text object, which can be wrapped in html elements, but then you need to set [useHTML(http://api.highcharts.com/highcharts#xAxis.plotLines.label.useHTML) parameter
Set the useHTML value to true and set your html content inside text. Here is an example of how to achieve it http://jsfiddle.net/9mvwpqf3/1/
yAxis: {
plotLines: [{
color: 'red',
width: 2,
value: 100,
label: {
useHTML: true,
text: '<button>Click Me</button>',
},
}]
},
Related
I'm working on a chart using echarts library with antd and react and I have to follow a specific tooltip design as below :
what I could do is :
tooltip implementation :
const chartOptions = {
tooltip: {
trigger: 'item',
responsive: true,
position: 'top',
formatter: '{c}',
backgroundColor: '#fafcfe',
borderColor: '#c8e2f7',
borderWidth: '0.8',
textStyle: {
color: '#5d6f80'
}
},
xAxis: {
data: xdata,
},
yAxis: {
type: 'value',
position: 'right',
},
series: [{
data: data1,
type: 'line',
name: 'data1',
},
{
data: data2,
type: 'line',
name: 'data2',
} ]
}
is there any way to add the down arrow and the link ( baby blue line between the tooltip and symbol)
css solution is acceptable but I'm beginner in css and frontend development in general
any suggestion would be helpful,
thank you
To add that vertical axis line, you can simply change to trigger: 'axis'. Beware that position: 'top' does not work with this option, so you would have to change it to something like this:
position: function (point) {
return [point[0], '20%'];
// if u wanna center it to the line, then u could do something like
// [point[0] - width_of_tooltip / 2, '20%']
}, ...
Regarding the down arrow, I see two options:
Change the formatter option to a function:
formatter: function (params) {
return `<div class="tooltip">${params[0]}</div>`;
}, ...
and then you can create the arrow with css, assigned to that tooltip class (see the example under Tooltip Arrows here: https://www.w3schools.com/css/css_tooltip.asp).
Other option, would be to manually add a background image of a tooltip arrow and assign it through the extraCssText option, like this:
tooltip: {
trigger: 'axis',
extraCssText: "background-image: url(https://f0.pngfuel.com/png/287/216/white-box-illustration-png-clip-art.png);background-size:cover;min-height:100px;",
...
}
there you can add more css options to make it look like you want (I just chose a random bubble text box).
I'd personally like the first option better. Good luck!
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
http://jsfiddle.net/leongaban/627yamt2/
Docs: http://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
Trying to get plotbands to show up, however no luck so far, what am I missing?
This is the only code I added to the forked jsfiddle above:
xAxis: {
dateTimeLabelFormats: {hour: '%I %p', minute: '%I:%M %p'},
plotBands: [{
color: 'red',
from: 1,
to: 2,
value: 3, // Value of where the line will appear
width: 2, // Width of the line
label: {
text: 'I am a label', // Content of the label.
align: 'left' // Positioning of the label.
}
}]
},
Trying to get something that looks like this:
I think that you need to use parameters connected with plotBands. Right now some of your parameters are connected with plotLines as well and I think this is causing your issue. Here you can find parameters for plotBands:
http://api.highcharts.com/highcharts#xAxis.plotBands
plotBands: [{
color: 'red',
from: 1265888000000,
to: 1345888000000,
label: {
text: 'I am a label', // Content of the label.
align: 'left' // Positioning of the label.
}
}]
And here you can find live example how your chart can look with plotBands:
http://jsfiddle.net/627yamt2/1/
You can also add plotBands using xAxis.addPlotBand method:
http://api.highcharts.com/highcharts#Axis.addPlotBand
Best regards.
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. :)
I am changing the label of my x-axis values. After trying to accomplish this, none of x-axis label's display.
Javascript Code
$(document).ready(function() {
var labels = [ '5/7','5/7','5/7','5/7','5/7','5/7','5/7','5/7','5/7','5/7' ];
chart = new Highcharts.Chart({
chart: { renderTo:'chart_container' },
title: { text: 'Rev Load' },
xAxis: { categories: ['5/7 64298-R3', '5/7 64308-R3', '5/7 64311-R3', '5/7 64312-R3', '5/7 64302-R3', '5/7 64307-R3', '5/7 64309-R3', '5/7 64297-R3', '5/7 64310-R3', '5/7 64305-R3'], labels: {
formatter: function() { return labels[this.value];} },
tickInterval: 3 },
yAxis: { max: 0.0018, min: 0.0014, plotLines: [{ color: 'red', dashStyle: 'shortDash', value: 0.0018, width: 2 }, { color: 'red', dashStyle: 'shortDash', value: 0.0014, width: 2 }], title: { text: '' } },
series: [{ data: [0.00150, 0.00170, 0.00140, 0.00180, 0.00150, 0.00160, 0.00140, 0.00150, 0.00180, 0.00160], name: 'Values' }]
});
C# DotNet Code
chart.SetXAxis(new XAxis
{
Categories = categories.ToArray(),
TickInterval = 3,
Labels = new XAxisLabels { Formatter = "function() { labels[this.value];} " }
});
Screenshot of what currently displays
As the screenshot shows the x-axis labels for the points are missing.
P.S. I am not referring to the x-axis title but the x-axis labels.
Background Information
Technology: ASP.NET MVC3 DotNet C#
DotNet Highcharts Library: http://dotnethighcharts.codeplex.com/
Please let me know if there are any misunderstandings in the problem. Thank you for your help and assistance!
EDIT
- I fixed the problem with missing the return keyword, but it looks like its still not showing the labels
You're not returning a value from you label formatter function -- try
formatter: function() { return labels[this.value];} }
Another problem is that this.value inside the formatter function is something like '5/7 64298-R3', so labels[this.value] is undefined.
It looks like you're trying to display the first part of the value -- if so, try:
formatter: function() { return this.value.split(" ")[0]; }