I would like to hide certain data points on click event of my grid. How can I achieve this ?
I have series with circle, triangle and square shape and would like to hide series using separate grid showing these symbols.
You can dispose and restore series as long as you have reference to them.
// Use PointSeries with Triangle shaped points as example and cache it.
const triangleSeries = chart.addPointSeries( { pointShape: PointShape.Triangle } )
// Add a checkbox to the chart for this example
const button = chart.addUIElement( UIElementBuilders.CheckBox )
// Set up the checkbox
button.setText('Click to hide/show series')
.setPosition( {x: 95, y: 95 } )
// Define the behavior when the button is clicked (changing its state)
.onSwitch( (_, state) => {
// The checkbox is in 'on' state, so restore series.
if (state)
// Restore the series to the chart, so it'll show in the chart again.
triangleSeries.restore()
else
// Dispose the series from the chart, effectively 'hiding' it.
triangleSeries.dispose()
})
You can modify the checkbox shapes using the setPictureOff or setPictureOn methods of the UIElementBuilder:
// Create a checkbox
const checkBox = chart.addUIElement( UIElementBuilders.CheckBox
// Modify the shape of the checkbox
.setPictureOff(UIButtonPictures.Rectangle)
.setPictureOn(UIButtonPictures.Rectangle)
)
Related
I am using the lightning charts(in this case the chartXY) by arction for real time data visualization in my react application.When I zoom in using the mouse wheel or the zoom rectangle the chart stops scrolling as expected.When I zoom out the chart starts scrolling but does not follow the interval I set it to.Is there any way to reset the zoom to go back to the current point in real time.
X Axis configuration:
progressive scroll
interval(0,3000) //in milliseconds I presume
Series configuration:
data pattern Datapatterns.horizontalProgressive
I also cannot find a method to control the zoom Out rectangle please let me know if this is present.
Thanks in advance.
Normally when the zooming rectangle is used to zoom out, LightningChart JS will fit the view to the current data. In your case you would like to go back to the original axis interval. You can attach a listener to Axis.onScaleChange event. In this listener you can check if the new scale range would be larger than the original range. And if it is, set the axis interval back to the original range.
series.axisX
.onScaleChange((start, end) => {
if (end - start > intervalSize) {
series.axisX.setInterval(end - intervalSize, end)
}
})
The "Zoom out rectangle" is called "Fitting rectangle" in LightningChart JS. You can change the visual style of it with ChartXY.setFittingRectangleFillStyle and ChartXY.setFittingRectangleStrokeStyle
chart.setFittingRectangleFillStyle(new SolidFill({color: ColorRGBA(255,0,0,125)}))
// Extract required parts from LightningChartJS.
const {
lightningChart,
DataPatterns,
AxisScrollStrategies,
SolidFill,
ColorRGBA
} = lcjs
const {
createProgressiveTraceGenerator
} = xydata
// Create a XY Chart.
const chart = lightningChart().ChartXY()
// Create progressive line series.
const series = chart.addLineSeries({
dataPattern: DataPatterns.horizontalProgressive
})
// configure axis
const intervalSize = 100
series.axisX
.setScrollStrategy(AxisScrollStrategies.progressive)
.setInterval(0, intervalSize)
// limit the axis interval to the original interval size
series.axisX
.onScaleChange((start, end) => {
if (end - start > intervalSize) {
series.axisX.setInterval(end - intervalSize, end)
}
})
// "Zoom out rectangle"
chart.setFittingRectangleFillStyle(new SolidFill({color: ColorRGBA(255,0,0,125)}))
// Generate traced points stream using 'xydata'-library.
createProgressiveTraceGenerator()
.setNumberOfPoints(1000)
.generate()
.setStreamRepeat(true)
.toStream()
.forEach(data => {
series.add(data)
})
<script src="https://unpkg.com/#arction/xydata#1.2.1/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/#arction/lcjs#1.3.1/dist/lcjs.iife.js"></script>
As shown in the image, I want to show two sunbursts next to each other. I want to implement it with Highchart and react in such a way where,
If user mouse over on any data point on one sunburst, same data point should get highlighted on another chart, while other data points just goes into disabled mode or changes their color to white
In mouseOver event, by using references to the charts, you can programmatically set 'hover' state at the right point:
point: {
events: {
mouseOver: function() {
const chart1 = component.highchartsChart1.current.chart;
const chart2 = component.highchartsChart2.current.chart;
function clearState(chart) {
Highcharts.each(chart.series[0].points, function(p) {
p.setState("");
});
}
if (this.series.chart === chart1) {
clearState(chart2);
chart2.series[0].points[this.index].setState("hover");
} else {
clearState(chart1);
chart1.series[0].points[this.index].setState("hover");
}
}
}
}
Live demo: https://codesandbox.io/s/nn54z2234m
API: https://api.highcharts.com/class-reference/Highcharts.Point#setState
By default, the border takes the color of the corresponding series or point. But I'd like to set a different color to the tooltip of a certain data point, without changing the color of the data point itself.
I needed something like this:
series: [ { x:1, value: 2.34, tooltip:{borderColor: '#112233'} }, ... ];
Sadly this property can not be set from a series.
By setting a formatter callback function in the tooltip configuration one can only define the inner HTML of the tooltip, i.e. the border color can not be changed from within this function.
Can this only be achieved by some CSS trickery?
It can be achieved by wrapping tooltip.refresh() method.
First, I check if the tooltip is shown, not shared, not split (a shared or split tooltip require a little different code). Then, I check if the options are set and change svg element's stroke attribute.
Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function(p, point, mouseEvent) {
p.call(this, point, mouseEvent);
if (!this.isHidden && !this.shared && !this.split) {
var pointTooltipBorderColor = point &&
point.options.tooltip &&
point.options.tooltip.borderColor,
seriesTooltipBorderColor = point &&
point.series &&
point.series.options.tooltip &&
point.series.options.tooltip.borderColor,
borderColor = pointTooltipBorderColor || seriesTooltipBorderColor,
label = this.label;
if (label && borderColor) {
label.attr({
stroke: borderColor
});
}
}
});
Example: http://jsfiddle.net/oLnfqhmn/2/
I am using highchart for some drilldown functions.
I having a function to let the user click on an area plot and add a line. But then i found out my function has a bug in it. There's should be only one red line between those charts, but when the user click on the other chart the existing red line on the first chart is not removing.
The belowing is the function my charts sharing.
var myPlotLineId = "myPlotLine";
addPlotLine = function(evt) {
var point = evt.point;
var xValue = point.x;
var xAxis = point.series.xAxis;
Highcharts.each(xAxis.plotLinesAndBands, function(p) {
if (p.id === myPlotLineId) {
p.destroy();
}
});
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
id: myPlotLineId
});
};
It should only allow one red line since i am using ID.
The below is the current situation.
Since i am using id for the plotline is shouldn't allow two line, please see my example:
http://jsfiddle.net/Xm4vW/74/
I want only ONE RED LINE in total out of many charts
UPDATE 1 :
I have tried redraw() in the new demo :
http://jsfiddle.net/Xm4vW/80/
but it doesn't help.
Please do let me know if the question is not clear enough.
There is nothing like 'Highcharts.each(xAxis.plotLinesAndBands, function(p) '. Iterate charts by loop and use 'removePlotLine(PlotLineID)' instead of 'destroy()':
for(i=0;i<Highcharts.charts.length; i++){
var chart=Highcharts.charts[i];
chart.xAxis[0].removePlotLine('myPlotLineId');
}
And set id in parenthesis:
id: 'myPlotLineId'
here is jsfiddle http://jsfiddle.net/asadsarwar89/bh4kz9rw/
We want to allow for the users to change the colors of the series from a monochrome-type gradient to divergent colors. We are doing this via a drop down menu and we capture their selection and do the update like below (simpler code than demo):
var rainbow = new Rainbow();
// Set start and end colors
rainbow.setSpectrum('#528bc2', 'white');
// Set the min/max range
var numSeries = chart.series.length;
var rangeLow = 0;
var rangeHigh = numSeries
rainbow.setNumberRange(rangeLow, rangeHigh);
// Loop over data and update the color value
for (index = 0; index < numSeries; ++index) {
if (chart.series[index].name != 'Navigator') {
if (chart.series[index].options.yAxis == 1) {
chart.series[index].update({
color: '#000080'
}, false);
} else {
chart.series[index].update({
color: '#' + rainbow.colourAt(index)
}, false);
}
if (chart.series[index].visible) {
var navigator = chart.get('nav');
navigator.setData(chart.series[index].options.data);
}
}
This does update the colors correctly and I can revert the change to use another list of colors in an array when the user wants to change back.
The chart is loaded up such that only one series is visible at a time and that series is used in the navigator series. When a user clicks on a series in the legend it hides the other series from being plotted and only shows the selected series, updates the navigator series, and updates the chart title. This works just fine when user does not change the color.
The issue I am facing is that when a user is on a series other than the initially loaded series when they change the color then the navigator series is reverted back to the series[0] data set because of chart.redraw() being called. How can I cleanly get the navigator series to be the currently visible series after calling the update code? I have tried putting this code (or similar block) after the color update and chart.events.load with no visible affect:
for (i = 0; i < this.series.length; i += 1) {
if (this.series[i].name != 'Navigator') {
if (this.series[i].visible) {
console.log(this.series[i].name);
var navigator = this.get('nav');
navigator.setData(this.series[i].options.data);
}
}
}
Here is a live set of data to work with in jsFiddle.
To reproduce issue let chart load, then click on 'Data Trend (%)' in legend so that it is visible in the chart. Notice that the navigator series has changed to be this series. Now, in the drop down change the selected value to "Multi-color". Notice how the series' color has changed, but so has the navigator series data.
Navigator has two properties which refer to series. The first one is its own series object - you update its data property, the second one is baseSeries which keeps reference to the main series from a chart.
http://jsfiddle.net/1jz3r78v/1/
If you set baseSeries to a visible series it works as you expected.
serie[i].show();
var navigator = this.chart.get('nav');
this.chart.scroller.baseSeries = this; // serie[i]
navigator.setData(serie[i].options.data);
this.chart.setTitle({
text: serie[i].name
});
Example: https://jsfiddle.net/yct6y11m/1/