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.
Related
I have a chart with several series that have data monthly. I am trying to use the stock tools GUI to enable users to add/alter the SMA indicator. I can get the stock tools to load and have the popup to modify the SMA properties. Except, the GUI has no series listed in the drop down. I have created a very simplified version using unemployment data and just one series here.
I am adding the libraries as per usual and my chart code is nothing fancy. My series looks like:
type: 'line',
name: 'Unemployment Rate (%)',
tooltip: {
valueSuffix: '%',
valueDecimals: 1
},
visible: true,
showInNavigator: true,
data: [{
x: 189406800000,
y: 4.50
},
{
x: 192085200000,
y: 4.30
},
{
x: 194590800000,
y: 3.60
},...
I get no errors in the console - just no way to create the SMA series linked to a series of my choosing. Note that if I manually create the SMA series and link to my data series it does appear but I do not want to create a default ahead of time.
You need to add id property to your series:
series: [{
id: 'one',
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/t91qeu3z/
API Reference: https://api.highcharts.com/highstock/series.line.id
Is there a way to side scroll (I mean, on x axis) eCharts graph bar? I have a huge amount of data that needs to be displayed, so it cannot "fit" only browsers width, because the whole graph will be very hard to read (Every column loses on width).
My echarts version: ^4.0.4
My chart
You can add the attribute called dataZoom inside the object called options then pass this obj to the .setOption.
dataZoom: [
{
show: true,
start: 94,
end: 100
},
{
type: 'inside',
start: 94,
end: 100
},
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
I saw this example but i don't know what you want precisely.
https://ecomfe.github.io/echarts-examples/public/editor.html?c=mix-zoom-on-value
I found this example that can help you:
Bar Chart with scrolling options
Here I have referred the open source javascript graph library for your slider chart requirement.
Plotly.js
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 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/
I've been trying to get graphing working, all the data seems to be graphing, however the tooltip doesn't move from the far right. This of course is a issue since I cannot then mouse over specific points to see the data.
Here is a JS fiddle example of what's happening: https://jsfiddle.net/kp7eyf8o/6/
NOTE: for some reason the stack overflow JSfiddle gives me an error, but the URL should show my issue.
var chart = c3.generate({
bindto: '#test',
data: {
x: 'x',
columns: [
['x', '2016-01-01', '2016-02-02', '2016-03-03', '2016-04-04', '2016-05-05', '2016-06-06', '2016-07-07', '2016-08-08', '2016-09-09', '2016-10-10', '2016-11-11', '2016-12-12'],
['2016 Actual', 12873666.64, 15976835.94, 19232540.28, 23649495.4, 26338636.36, 29496799.84, 43801703.66, 4263924.64, 5788580.3, ],
['2016 Projected', 3916752.11, 4626643.23, 5146264.25, 6148854.32, 6640724.57, 7409783.48, 8263054.46, 8488001.54, 8837809.1, 9068047.68, 9402019.15, 9513505.72, ],
['2015 Actual', 3256870.0, 3825580.0, 4394290.0, 5550000.0, 6044000.0, 7100000.0, 7700000.0, 8154000.0, 8860000.0, 9200000.0, 9500000.0, 9600328.45, ]
],
colors: {
'2016 Actual': '#2cd554',
'2016 Projected': '#1bc4fc',
'2015 Actual': '#fdaf5a'
}
},
axis: {
x: {
type: 'timeseries',
tick: {
culling: false,
format: '%b'
}
},
y: {
tick: {
format: d3.format("$,.2f")
}
}
},
});
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet" />
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.12/d3.min.js"></script>
<div id="test"></div>
I saw someone mention using 'xs: {x .... y....} but I wasn't able to get that working. I need the X axis to be dates (hard coded right now but in my app I'm using dates associated with one dataset I'm looping through), and the Y axis to be $.
C3 tooltips seem to break when data arrays of different lengths are entered into the columns. You can try putting null values into the shorter array so that the tooltip can move properly.
JS Fiddle: https://jsfiddle.net/stancheta/7zgny2yd/
['2016 Actual', 12873666.64, 15976835.94, 19232540.28, 23649495.4, 26338636.36, 29496799.84, 43801703.66, 4263924.64, 5788580.3, null, null, null],