I am using highcharts + highcharts-ng and I'm trying to position the container for series Data (where the number 80 appears below) a little bit higher since it is overlapping with numbers 200 and -200 in the ticks. I looked in the docs here and here but could not find the relevant info, I also tried everything in the comments in the code below but it did not work - what option do I need to do this? here's a fiddle: http://jsfiddle.net/youngfreezy/8Cx5s/63/
series: [{
name: 'Credit Used',
// xAxis: 2,
// yAxis: 2,
zIndex: 2,
data: [80],
tooltip: {
},
// spacingBottom: 15,
// align: 'left'
// position: {y:2},
// x:2,
// y:2,
// marginBottom: 5
}]
I needed the dataLabels object. here is the updated fiddle in case it helps anyone else:
http://jsfiddle.net/youngfreezy/8Cx5s/65/
Related
I would like to draw a horizontal target line showing threshold limits on a line, bar and pie chart using EChart.JS (https://ecomfe.github.io/echarts-doc/public/en/index.html).
There are other threads - "Chart.js - draw horizontal line" which detail how to do it with Chart.JS. Has anyone out there got particular experience on this with EChart?
Thanks in advance.
[Edit] Since Echarts v3 came up and was passed to the Apache Foundation, the documentation has been sclattered through different URLs, some options have gone away, some are not shown in all documentation resources, and so on. Links provided below have been updated (as of 24/02/2020) but might break again. I haven't fully tried v3 but provided code below should still work.[/Edit]
The option markLine is designed for that, see documentation here:
https://echarts.apache.org/en/option.html#series-line.markLine
Note that there are different uses for it, and different options to provide, depending on what you want to draw:
arbitrary line on the canvas (any size, any direction, any style)
lines matching data caracteristics (min, max, average)
horizontal/vertical lines
You have to use the attribute markLine.data in all cases, and description of specifics is described here:
https://echarts.apache.org/en/option.html#series-line.markLine.data
Here's how I go, with a line curve on a time serie. Note that I couldn't get, within markLine.data[0], yAxis to be enough to draw a horizontal line: xAxis must be specified too (start and end points).
xAxis: {
type: 'time',
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: [
[1509762600, 7.11376],
[1509832800, 7.54459],
[1509849000, 7.64559]
],
markLine: {
data: [
// 1st line we want to draw
[
// start point of the line
// we have to defined line attributes only here (not in the end point)
{
xAxis: 1509762600,
yAxis: 3,
symbol: 'none',
lineStyle: {
normal: {
color: "#00F"
}
},
label: {
normal: {
show: true,
position: 'end',
formatter: 'my label'
}
}
},
// end point of the line
{
xAxis: 1509849000,
yAxis: 3,
symbol: 'none'
}
]
]
}
}]
Here's a fiddle I found: https://jsfiddle.net/381510688/hff93ska/
Note that ECharts really like to display markLines with arrow symbols in the end of it, hence my use of symbol: 'none' in above code, to have just the line drawn.
I work with chart js version 2.5.0. I have a bubble chart and I would like that when a bubble is clicked, it keep the tooltip corresponding remains displayed.
I tried to make a plugin, in which it is enough to add a keepTooltipOpen parameter in the data like that:
datasets: [{
type: 'bubble',
label: "set2",
data: [{
x: 14,
y: 30,
r: 60,
//Here is the added parameter.
keepTooltipOpen: true
}, {
x: 2,
y: 5,
r: 30
}]
You can find the Fiddle here. There is an error in afterDatasetsDrawwhen the tooltip is update. Open web console to see it.
Someone have a suggestion to resolve this problem?
In chart.js version 2.5.0, you need to write _options: chart.options.tooltips,instead of _options: chart.options,.
New Fiddle is here.
I'm trying to move the x-axis labels so that they appear along the line x=0. The scales are constantly changing, so I don't want to set the location using pixels, as y=0 may not be in the same location for each plot.
I tried looking up this question on this site and someone recommended using "crossing:0," as shown below, but that doesn't work.
xAxis: {
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
crossing:0,
title: {
text: 'some value',
},
If someone could help me with this positioning, I would appreciate it.
Here's my JsFiddle: http://jsfiddle.net/z7eyv/35/
crossing is not an out-of-the-box feature of Highcharts.
Based on what I could find, it seems what you want is the "Crossing-Specific-Value" Highcharts plugin, which is located here: http://www.highcharts.com/plugin-registry/single/6/Crossing-Specific-Values
Update (July 5, 2016): To address the comments about your fiddle, you need to explicitly add the "Crossing-Specific-Value" plugin after your bring in the Highcharts library (see the third line below):
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/crossing-specific-value/master/crossing-specific-value.js"></script>
Now, adding the crossing variable to your x-axis will show the labels as in the demo.
I made a few tweaks to your fiddle (see http://jsfiddle.net/brightmatrix/z7eyv/38/) to better suit what you're asking.
1) Using the demo as the default, it seems that the plugin puts your labels above the axis line. I've seen instances where the labels are better ready below the line so I did the following:
xAxis: {
crossing: 0,
opposite: true,
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
title: { text: '' },
labels: { y: 15 } // pushes the labels down below the crossing line
},
2) I then adjusted the plot line for the y-axis as follows:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: { text: 'some value' },
plotLines: [{
value: 0.1,
width: 1,
color: 'black',
zIndex: 10 }] // moves the plot line above the axis gridline
},
The zIndex value of 10 means the line will show up on top of the normal gridline. Here's how this looks:
Please let me know if this better answers your question.
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.
There are several examples with the Speedometer in Highcharts.
Is there a way, to show an additional dataLabel only, without dial in the gauge?
It could show a trip recorder, mileage counter or day counter.
I tried additional series and dataLabels, but could not get it running.
http://jsfiddle.net/uqa0t3xw
series: [{
name: 'mileage counter',
data: [],
dataLabels: {
x: 0, y: 20,
format: '{y:.0f} km',
}
}]
If you want to have an additional data label by adding another series and hiding the dial you can do so by setting the color of the dial to "transparent" (JSFiddle):
series: [
// Our "hidden" series
{
name: 'mileage counter',
data: [0],
dataLabels: {
x: 0, y: 50,
format: '{y:.0f} km',
},
dial: {
backgroundColor: 'transparent'
}
},
// ... Other series
]
Also note how the y value has to be big enough to not overlap with the other data labels. If it overlaps it will be hidden, since gauge has allowOverlap: false by default. Alternatively you could set that to true, but overlapping might not be pretty.
It should be noted that this can also be solved by creating your own div and placing it in the correct spot or perhaps copying the data label from the first series and moving it slightly.