need to add mat tooltip for specific date in mat-datepicker.
https://stackblitz.com/edit/mat-date-tooltip?file=app%2Fdatepicker-start-view-example.ts
I tried with this code but document.querySelectorAll(".endDate .mat-calendar-content[ng-reflect-ng-switch='month']"); is returning empty array
https://stackblitz.com/edit/mat-date-tooltip?file=app%2Fdatepicker-start-view-example.ts
Related
I am using Vaadin Charts 4.1.0. I m using Chart chart = new Chart(ChartType.COLUMNRANGE); I am displaying some boxes by configuring DataSeries with xaxis and y axis values but based on some criteria I wanted to draw line before each box with some start value and end value. so Can anybody please help me to draw line before each boxes
I'm attempting to change edgeColor property for a series in a 3d column chart after the chart is drawn, based on some user input (like selecting a certain series). I was able to do this was a 2d column chart using the borderColor property. My data loading snippet looks like this:
$.each(seriesDataArray,function(i,val){
console.log (val);
chartDetails.series.push({ "size" : val.datasetSizeVerified , "data" : val.data});
};
And I'm trying to modify the edgeColor in a function later on in code:
function highlightChartSeries(currentTableDisplayIndex){
if (myChart){
$.each(myChart.series,function(i,val){
val.edgeColor = "green" ;
val.redraw();
});
myChart.series[currentTableDisplayIndex].edgeColor = "red";
myChart.series[currentTableDisplayIndex].redraw();
}
}
Again, this works great in 2D with a column chart using the borderColor property. I can set the edgeColor in the original series object during chart construction, and that edgeColor is reflected in my original graph. However, I can't change it later. Any help is appreciated!
To add (or change) some value to existing series, you should use Chart.Series function called update(), and pass to it new configuration options object, because it is a function specially created to executing actions like that. Please take a look at code below:
chart.series.forEach(series => {
series.update({
edgeColor: 'black'
})
})
I prepared for you live example how to use that function.
Best regards!
We have a request from customer and we need to trick the highcharts bar view.
The problem is our series contain timestamp vs value but business wise this value is corresponding to previous timestamp to that value's timestamp. So we would like to show the bars in between of these timestamps.
So is there an easy way to do this in highcharts w/o playing with the points in the series.
See images below;
Current Highchart Behaviour
Requested Chart Behaviour
You can use xAxis.tickPositioner in order to move ticks and xAxis.labels.formatter to change labels values.
Live example: https://jsfiddle.net/h9zjmqap/
Output:
I have a chart where the plotBands resize, and the labels have to change. However I cannot figure out how to change the labels after the chart is created.
I have tried:
changing the chart.axis[0].options.plotBands[0].label.text, marking the axis as isDirty and redrawing the chart
using an HTML label and changing the value via jQuery
Do I have to use a label formatter function or is there something in the API I missed?
I wanted to change the "to/from" values of the plotbands and found no attr method, this worked though:
this.chart.yAxis[0].plotLinesAndBands[4].options.from = this.min;
You can use attr() function which allows to update graph elements like plotBand label. Example:
http://jsfiddle.net/eaFdr/1/
$('#btn').click(function(){
chart.xAxis[0].plotLinesAndBands[0].label.attr({
text:'aaaa'
});
});
I have a HighStock chart that is pulling in some OHLC data and creating a chart with 3 series - 1 candlestick, 1 volume, and 1 set of flags. This all works fine.
I want to add some custom trend lines to the chart. I will determine the points and do the paths based on custom logic.
The problem is that when I use the Renderer from the Chart to draw my path, the path is not connected to the underlying chart. As the chart date range is modified and/or new points are added to the primary series, the placement and size of my custom path remains unchanged. It is constant.
I need the location/endpoints of the custom path to be tied to the datapoints of the chart, not the coordinates of the svg drawing. Is there a way to accomplish this?
Here is the portion of the code that is adding a simple path from pointa to pointb. The path renders as expected but is then static:
buildPath: function(pointa, pointb){
this.myChart.renderer.path(this.buildPathArray(pointa,pointb))
.attr({
'stroke-width': 2,
stroke: 'red'
}).add();
},
buildPathArray: function(pointa, pointb){
var pathArray = [];
pathArray.push('M');
pathArray.push(pointa.plotX);
pathArray.push(pointa.plotClose);
pathArray.push('L');
pathArray.push(pointb.plotX);
pathArray.push(pointb.plotClose);
pathArray.push('Z');
return pathArray;
}
Per request, I created a JS Fiddle that demonstrates the general issue.
Any help is much appreciated.
SOLVED
This doesn't seem to come for free with Highcharts. Or if it does I did not find out the technique.
I had to use both the load and redraw events of the chart object contained in my StockChart.
On load, I draw the initial paths, aligned with the Point objects involved in my trending lines. As I build these path objects (SVGElement objects containing the genuine SVG path elements) I keep track of them in an array.
On redraw, I have to both destroy the old trend lines and create new ones. So I loop over my array of old elements and remove each from their own parentNode. Then I draw a fresh version of my trend lines based on the newly plotted location of each of my relevant Point objects.
The end result is that on each redraw event, the lines appear to move with the chart, when they're really being destroyed and recreated.