How to get lightweight-charts to draw session breaks - javascript

I'm able to use lightweight-charts to display price and volume just fine. When the data is for multiple days, I want the chart to also show session break vertical lines (like it does in TradingView app). I looked through the Chart Options and API documentation and cannot find how to draw session breaks. Please advice.

Well, while exactly speaking you can not draw a vertical line, but you can substitute that with a histogram series having a data item on each session start. That series should be configured to have 100% height and should be semi-transparent so the candle behind that is not hidden.
The code should look similar to this:
verticalSeries = chart.addHistogramSeries({
priceScaleId: 'vertical',
color: 'rgba(128, 128, 255, 0.25)',
scaleMargins: { top: 0, bottom: 0 }
})
verticalSeries.setData(opens.map(open => ({ time: open, value: 1 })))

As of version 3.8 it is not possible to draw vertical lines on the chart. There are a few feature requests for this on the issues page for the library so it is possible that this may be added as a new feature in an upcoming release.

Related

Connect Playhead like Slider to Chartjs to only Show a Specified amount of Data Points on Each Slider Movement

I am using Chartjs 4.2.0 in order to create a line chart that only shows a specified amount of data-points based on the slider position. This does not add more data-points, but instead acts more like a sliding window only showing 2 items at a time for example. I could not find any examples of this being done online currently so I decided to start creating my own plugin for Chartjs.
So far, as shown below I have a basic line graph as taken from the Chartjs samples page and used the min and max options on the xAxis. Looking through the Chartjs documentation the min and max values seem like my best bet in creating the sliding window effect that I need for my chart. The blue slider bar below does move within the canvas and it does output the precent to the end of the lightgrey background bar. Just trying to figure out the best way to connect the bar and graph together.
...
scales: {
y: {
beginAtZero: true
},
x: {
min: 0,
max: 2
}
}
...

How to use stacked bar chart with no space between bars which are one over another in a vertical chart?

I have a Plotly.js chart and there is a minor design issue described below with screenshots.
This is how it looks like right now:
And this is how it looks with layout.bargap set to 0:
I would like to keep the horizontal spacing but without the vertical spacing between the bars that are one over another.
What I have tried
I have tried setting layout.bargroupgap to 0 but it has no effect in this context.
I also tried these things but they did not work as I wished:
this.context.updateContainer({
// 'marker.line.color': '#000',
// 'marker.line.width': -1, // or 0
// 'selected.marker.opacity': 0,
// 'unselected.marker.opacity': 0,
});
The project on which I am working is here but I do not know what part of it is of interest.
There are no error messages.
Thank you.

Highcharts. Highlight line chart date interval on hover

I'm trying to implement highlight for a single section of line chart while hovering over this section. Under section I mean space between (in my case) vertical lines, which are representing separate date intervals depending on chart zoom level. The chart itself has dynamic data, which is being pulled from an endpoint with more detailed data, depending on date interval zoomed in.
During investigation I've found a plotBands property of x/yAxis. But the thing is, that this property only allows to set each plotBand manually.
So the question is, if there is something that will help me to do automatic creation of plotBands or similar hoverable/clickable stuff, for each separate time "interval"?
you can set the TestValue dynamically according to your needs and use something like this JSFiddle:
plotBands: [{
color: '#FCFFC5',
from: ($.TestValue)+1,
to: ($.TestValue)+2
},...]

How to colour lines of epoch.js chart?

I'm pulling some data out of graphite, transforming it and using epoch.js to display it as a realtime line chart.
$('#graph').epoch({
type: 'time.line',
data: data,
axes: ['left', 'right', 'bottom']
});
This successfully displays the graph, but both the lines are black. The graph in the epoch example has different colours for each line, but I can't find any reference of how to do this in the docs or work out how it is doing it from the example's source.
How can I change the colours of the lines?
I've faced the same issue and it took me quite some time before I realized what's wrong.
In my case I forgot to add class="epoch category10" to the div that has the graph in it. E.g.
<div id="area" class="epoch category10" style="height: 200px;"></div>
It seems that the examples on the basic and real-time chart pages are missing this class definition. The getting started page however specifically states the above line.
If you want to set colors layer per layer, this trick works:
https://github.com/epochjs/epoch/issues/137#issuecomment-177531945
var layer_num = 0 # insert here the number of the layer
var catname = "category2" # insert here the css class category
chart.getVisibleLayers()[layer_num].className = "layer " + catname
Visit this link for more informations about category colors. By default, category10 is used, so "category1" is #1f77b4, "category2" is #ff7f0e etc

jqplot pie chart legend width

I'm trying to render the legend of a pie chart so that it has a fixed width, and when the labels reach that width (the div holder) to hyphenate on the next line. I tried the row option but it doesn't work very well because my data is dynamic and at times i have say 3 data sets, and each one of them gets rendered in a separate row, while at other times i have 15-20 data sets and it becomes messy.
Anyway the solution is to restrain the legend to the width of the div, that it is rendered into, yet it doesn't seem to be accepting any css alterations. I tried adding width:250px; to the "jqplot-table-legend" in jqPlot css, i also tried adding it into various places using Inspect Element in Chrome to test whether it works, but it doesn't seem to accept the new width. I also tried to hard code it into the javascript file at various places with no luck.
I'm not sure what I can add to the question in terms of code. Everything is pretty standard on the jqPlot side.
Any suggestions on how to get around this will be much appreciated.
This seems like the quick and dirty way, but it gets the job done. I'll use the jqplot.pieRenderer.js file as the example since it's easier to read than the minified version. Open the js file and scroll down to line 568. Right under
this._elem = $(document.createElement('table'));
this._elem.addClass('jqplot-table-legend');
add
this._elem.css({width: 300});
That will stretch the table out to whatever width you need it to be. Unfortunately, it also stretches out the column with the color swatch so you'll now need to scroll down a little further until you find
td1.css({textAlign: 'center', paddingTop: rs});
change that to
td1.css({width: 16, textAlign: 'center', paddingTop: rs});
and you should be all set.
Another method:
Just add these lines:
if (this.width) {
ss['width'] = this.width;
}
They allow you to set an arbitrary width in each different graph
You might also want to add these lines in jquery.jqplot.js (i.e if rendering bars)
Search for "createElement('table')" as described by mike
Worked for me

Categories