I struggle to add a label on top of a line in highcharts .. for example suppose I have 4 series (all visible) with name 'data', 'mean', '+1 std', '-1 std':
And I would like as a result:
I am lost to know how to add it ... even with the documentation it seems I need the abscissa and ordinate to add for each label. How can I retrieve this information? Is it possible to add the label directly when I add the series?
chart.addSeries({
id : 'mean',
name : 'mean',
type : 'line',
lineWidth : 1,
lineColor : 'rgba(0,128,0,0.9)',
color : 'rgba(0,128,0,0.9)',
dashStyle : 'LongDash',
zIndex : 5,
data : [[ext.dataMin, mean], [ext.dataMax, mean]],
enableMouseTracking: false
});
Notice that I do not want to display this information in a legend, but on the chart itself-
You can do this with a dataLabel.
If you disable dataLabels in the plotOptions, but enable them on the first point of each series, you will get exactly what you're asking for.
Code example:
data: [
{
x:0,
y:5,
dataLabels:{
enabled: true,
format: 'label 1: {y}'
}
},
[10,5]
]
Fiddle example:
http://jsfiddle.net/jlbriggs/vtmqLzer/
Related
I am using JSCharting library to draw this line chart and in the line chart when you hover your mouse over the graph you get details about the point which straight above or below your mouse pointer. like this:
.
Here is my code for drawing the chart:
JSC.Chart('chartDiv', {
title_label_text: 'ICryptoWorld Price Chart',
legend_visible: false,
type: 'line',
xAxis_crosshair_enabled: true,
yAxis: { scale_minorInterval: 25, formatString: 'c' },
defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',
defaultPoint_tooltip: `%seriesName : $ <b>%yValue</b> <br>Date: <b>%zValue<b><br>`,
series: series
});
So, as you see:
it shows USD and Date but there is also an value above them (In this case it is 1641475802). How do I remove it or disable it from showing?
Since you enable the crosshair, the main tooltip template for all series is under defaultTooltip_label_text and by default is `%xValue %values'. You can change it to just '%values' which will show only the point tooltips.
JSC.Chart('chartDiv', {
title_label_text: 'ICryptoWorld Price Chart',
legend_visible: false,
type: 'line',
xAxis_crosshair_enabled: true,
defaultTooltip_label_text:'%values',
yAxis: { scale_minorInterval: 25, formatString: 'c' },
defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',
defaultPoint_tooltip: `%seriesName : $ <b>%yValue</b> <br>Date: <b>%zValue<b><br>`,
series: series
});
Hope that helps.
I want to use the linkedTo option in my series in order to link several series to each other. For instance if I have series with ids: series1, series2, series3, series4, I want to link all of them together expect series2.
What is the syntax of linkedTo: ... ?
I tried using array, like below but it didn't work:
{
id:'series1',
linkedTo: ['series3','series4'],
data : ...
},
...
I found another way for doing this instead of giving an array to the linkedTo option:
you could give linkedTo: null for the first series and give linkedTo: 'series1' for the other series. (link all to the first series)
Also use showInLegend: true for the first series and showInLegend: false for the rest.
Example:
{
id:'series1',
linkedTo: null,
showLegened: true
data : ...
},
{
id:'series3',
linkedTo: 'series1',
showLegened: false
data : ...
},
...
This is my EChart init code:
var option = {
tooltip : {
trigger: 'axis'
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : cat
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'Series 1',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:val
}
]
};
The line appears with area (correct) and colored in red (I think by default, I haven't added anything to my code). How can I change the color of the chart's line?
I've tried with
itemStyle: {normal: {areaStyle: {type: 'default'}}, color: '#d5ceeb'},
but it doesn't work.
You are writing color inside itemStyle which changes color of your data points, not the line.
It should be written in lineStyle for the line color to change.
series : [
{
name:'Series 1',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:val
lineStyle: {color: '#d5ceeb'}
}
]
For more options on lineStyle refere here
As you can see on image below, if you don't neet to define details of line or item (in case scatter chart type) color can be specified on the same level as data, type ... etc
I am using the Highstock and I've been reading the API documentation to look for the plot labeling however, was unsuccessful.
When I do something like
xAxis: {
labels: {
enabled: true,
name: plot one name,
floor: 0,
}
}
or
series: [{
data: XData,
name: plot one name
}
it does not give me the label at the bottom.
It works in the highchart, but highstock. Is there a documentation / APi to add plot label inside the graph ?
for example, in the following link of the highchart is the plot label of "tokyo" and "london" http://www.highcharts.com/demo/line-labels
The labels you are looking for is called the legend (API).
It is disabled by default in Highstock. You can enable it by adding this code:
legend: {
enabled: true
}
has anybody played around with the new highcharts library. This is the sample jsfiddle I am looking at:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/heatmap/
Each cell color is blue, it needs to change based on the data in cells. I thought this line of code was supposed to do that. Any ideas how to change the color or each cell based on data. For example if we are working with data from 1 to 10. if the data in a cell is 1, the cell should be green colour if the data is 10 is should be read, based on the following options. Any ideas how to do this?
colorAxis: {
stops: [
[0,'green'],
[0.5,'orange'],
[0.9,'red']
],
min: -20
},
stops: [
[0, '#FF0000'],
[1, '#00FF00'],
[2, '#FFA500'],
[3,'#FFFF00']
],
min: 0,
max: 1
This will give you the exact colours also in the series you need to give the json Object like this:
{"x":0,"y":0,"value":0,"myData":"Critical"} The value is the attribute which gives exact colour
Use colors for list of colors,
In colorAxis declare dataClassColor as 'category' and define your data range in
dataClasses
colors : ['#D7EDE5', '#9BD1BE', '#37A47E'],
colorAxis : {
dataClassColor : 'category',
dataClasses : [{
to : 57.1
}, {
from : 57.2,
to : 60.4
}, {
from : 60.5
}
]
},
Demo http://jsfiddle.net/patelriki13/q2yww0vw/
You need to use Highcharts 3.0.10, to set colours.