I am using c3.js for implementing dashboard. It works pretty fine. But I just want legend on top as appeared at bottom. I want to draw chart as this sequence.
Legends
Chart
Ticks
This is sample figure what is want.
By searching in web, if I set legend configuration like this
legend: {
show: true,
position: 'inset',
inset: {
anchor: 'top-right',
x: 50,
y: 0,
step: 1
}
}
Then legend overlaps main graph as image below:
This is very typical requirement but not available in c3js. How can I do that?.
Use the padding option to set a top gap:
http://c3js.org/reference.html#padding-top
And then set a negative y offset on the inset:
legend: {
position: 'inset',
inset: {
anchor: 'top-right',
x: 50,
y: -30,
step: 1
}
},
padding: {
top: 30
}
Related
is there any way to create shape or create marks on chart in custom indicator using tradingview charting library. I am using this way to create custom indicators. Thanks in advance.
Yes you can. Here is the guide.
For the callouts/Markers on chart you can follow this guide in the JS API.
https://github.com/tradingview/charting_library/wiki/JS-Api#gettimescalemarkssymbolinfo-from-to-ondatacallback-resolution
For getmarks you can do this
getMarks: (symbolInfo, startDate, endDate, onDataCallback, resolution) => {
var Arr = [
{
id: 1,
time: 1551448800000 / 1000,
color: 'blue',
text: 'Hello world',
label: 'B',
labelFontColor: 'yellow',
minSize: 20
},
]
onDataCallback(Arr);
console.log("=====getMarks running");
},
It will plot the marks above the bars as shown in the below image.
For Timescalemarks.
getTimescaleMarks: (symbolInfo,startDate,endDate,onDataCallback,resolution) => {
onDataCallback([
{
id: 1,
time: / 1000,
color: 'Turquoise',
label: 'The test you want to show on marker',
minSize: 20,
tooltip:[
"Information you want to print",
]
},
]);
})
The Time scale marks will look like this. And they will be plotted below the bars.
And for the shapes like circles and arrows you can follow this documentation. And use the createMultipointShape(points, options) methos to plot your shapes.
https://github.com/tradingview/charting_library/wiki/Chart-Methods#createmultipointshapepoints-options
I want to indicate the high/low in the circle where I can display the different color if the progress value exceeds 60. Eg, if my value is 80 then till 60 it should show green color and remaining 20 should be in red color. Is it possible to achieve this using vue-ellipse-progress?
<vue-ellipse-progress
:progress="myvariable"
:angle="-90"
color="#1565C0"
emptyColor="#BBDEFB"
:size="180"
:thickness="10"
emptyThickness="15%"
fontColor="black"
dot="10 white"
>
<span>{{myvariable}} </span>
</vue-ellipse-progress>
Got one solution to this. By adding gradient to the color attribute helps to show the colors accordingly.
:color = "gradient"
gradient: {
radial: false,
colors: [
{
color: '#1565C0',
offset: 80,
opacity: '1',
},
{
color: 'red',
offset: 40,
opacity: '1',
},
]
}
I used this exmaple http://dygraphs.com/tests/smooth-plots.html to draw smooth lines. When I anable the smoothing by plotter: smoothPlotter small dots at data points disappear. I have set drawPoints: true. Dot is displayed when mouse is on the curve.
How can I enable small dots at data points ( http://dygraphs.com/options.html#drawPoints ) and still use smoothing?
I have not found a way to enable pointdrawing. But you can make a second series with the same data and draw only the points, not the lines. Like so:
new Dygraph(document.getElementById('graph'),
functionData,
{
series: {
Straight: {
color: 'red',
strokeWidth: 0,
drawPoints: true,
pointSize: 7
},
Smoothed: {
plotter: smoothPlotter,
color: 'red',
strokeWidth: 2
}
},
});
http://jsfiddle.net/wLxs4ju1/
I create a line chart using dojo. Recently, I have been applying multiple axis on the chart. But there was a problem here. It is applied to multiple axes in one place I have raised the issue of overlapping tick value. and do not change the properties of leftBottom, is there a way to adjust the shaft position? For example, x: 10, y: 20?
my code
var axisXRef = {labels : labelsample, titleOrientation : "away", stroke : {}, natural : true};
var axisYRef = {vertical : true, stroke : {}};
var chart = new Chart("chartNode");
chart.addPlot("lines", { type: Lines, tension: 3 ,min:0});
chart.addPlot("stacklines", { type: StackedLines, tension: 3 ,hAxis:"x",vAxis:"y1"});
chart.addPlot("areas", { type: Areas, tension: 3,hAxis:"x",vAxis:"y2" });
chart.custom.axisX = lang.clone(axisXRef);
chart.custom.axisY = lang.clone(axisYRef);
chart.addAxis("x", chart.custom.axisX);
chart.addAxis("y", chart.custom.axisY);
chart.addAxis("y1", {
vertical: true,
min : 50,
max:70,
leftBottom:true,
majorLabels: true, majorTicks: true, majorTick: {color:"red",length:50},
minorLabels: true, minorTicks:true, minorTick:{color:"red",length:50},
microTicks: true, microTick:{color:"red",length:50},
fixUpper: "major",
fixLower:"minor"
});
chart.addAxis("y2", {
vertical: true,
min : 0,
max:49,
leftBottom:true,
majorLabels: true, majorTicks: true, majorTick: {color:"blue",length:25},
minorLabels: true, minorTicks:true, minorTick:{color:"blue",length:25},
microTicks: true, microTick:{color:"blue",length:25},
fixUpper: "major",
fixLower:"minor"
});
Unfortunately Dojo charting only supports two axis per direction both axis being on different side of the chart. In other words you can't have two axis both on the left side of the chart. You have to have one right side using leftBottom: false property.
I am using Sencha Touch charts 1.0.0 for my project. I would like to add values on each point in my line chart (as in image). I tried the same approach in this question for column chart, but it didn't work out.
I had the same problem with you. But i find a solution instead for that. You can add marker at each node of line and when you click on marker a popup will show detail information as you want. This's my code may help you :
-Add marker in cofig of series :
type: 'line',
title: 'Clickeds : ' + total[4] + ' ( ' + Math.round(arrInfo[4]) + '% )',
highlightCfg: { scale : 0.7 },
xField: 'Date', yField: 'Clks',
style : {
stroke: 'rgb(50, 185, 150)',
miterLimit : 3,
lineCap: 'miter',
lineWidth: 2
}
,
marker:{
type: 'image',
src: 'resources/images/square.png',
width: 24,
height: 24,
x: -12,
y: -12,
scale: 0.5,
fx: {
duration: 200
}
}
Handle event when you click on node, you add listeners to config of chart : `listeners: {
itemtap: function( series, item, event, eOpts ){
//handle your code here.
}`
Regards,
(Sorry for bad english.)