There is one case where the chart markers are getting removed after panning graph out of the screen. content reamins the same for the markers but lines will get removed.
here is the fiddle for adding chart marker to the graph.
this.graph.addChartMarkerXY()
.setPosition({ x: data.time, y: data.eventYData })
.setDraggingMode(undefined)
.setPointMarkerVisibility(UIVisibilityModes.never)
.setGridStrokeXStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F70002') }) }))
.setResultTableVisibility(UIVisibilityModes.always)
.setResultTable((table) => table
.setOrigin(UIOrigins.CenterBottom)
.setContent([
[`${data.name}`]
])
)
.setMouseInteractions(false)
.setGridStrokeXVisibility(UIVisibilityModes.always)
.setGridStrokeYVisibility(UIVisibilityModes.never)
.setTickMarkerXVisibility(UIVisibilityModes.never)
.setTickMarkerYVisibility(UIVisibilityModes.never)
Related
I have created a chart with 3 points. I have added two graphical elements as circle and rectangle (line) for dragging the points.
Circle dragging should apply for all three points in the graph as in the expected behavior screenshot below.
Line dragging is a vertical shift for graph to move it vertically.
Circle dragging does not apply for all 3 points when I return both graphical elements in the elements array as in the code. It just applies only for 1st point.
When I return one graphical element at a time it works.
Current Behaviour
image of how chart works now
Below I have included the code which returns graphic elements
myChart.setOption({
graphic: data.map(function (item, dataIndex) {
let rec = {
type: 'group',
left: 'center',
position: myChart.convertToPixel('grid', item),
draggable: 'vertical',
ondrag: function (dx, dy) {
onPointDraggingLine(dataIndex, [this.x, this.y]);
},
children: [
{
type: 'rect',
top: '200x',
shape: {
width: 470,
height: 0
},
style: {
stroke: 'gray',
lineWidth: 5,
lineDash: [6]
},
cursor: 'move'
}
]
};
let onlyCrc = {
type: 'circle',
position: myChart.convertToPixel('grid', item),
draggable: true,
ondrag: function (dx, dy) {
onPointDragging(dataIndex, [this.x, this.y]);
},
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: false,
z: 100,
cursor: 'move'
};
return { elements: [rec, onlyCrc] };
})
});
I have tried to return graphical elements as array of objects .And I have tried by giving a condition for dataIndex while mapping. but didn't work. Expected behavior is as below.
Expected Behavior.
image of how chart should work
Below I have attached the whole code I tried in Codepen.
Link to Minimal Reproduction
https://codepen.io/rushaidrilaf/pen/bGKONRj
I was able to Solve this. Started to resolve it by pointing the dragging function to 2nd point in the graph and updating the position of circular graphical element while dragging the horizontal line.
solution can be viewed from this link
https://codepen.io/rushaidrilaf/pen/bGKONRj
enter code here
I am creating Gradient chart using Ant Design Charts and want to change the overall color of data points but on using the color property, it is only changing the border/stroke and not the internal color. Here's the link to the plot which I am using:
https://charts.ant.design/en/examples/area/basic#basic-gradients
This is the config code which I am using:
const config = {
data,
xField: 'Date',
color: "#1DD1A1",
yField: 'scales',
xAxis: {
range: [0, 1],
tickCount: 5,
},
areaStyle: () => {
return {
fill: '#1DD1A1',
};
},
};
And here is the component:
<Area {...config} xAxis={false} yAxis={false} style={{marginTop: "45px"}} height={270} tooltip={false} smooth={true} point={{color: "#9F7DE1"}} line={{color: "#9F7DE1"}}/>
Following is an image, I basically want the change the white color of entire point to purple just like the line color.
I am adding a list of markers to my chart based of certain conditions, these conditions are varying and therefore I will need to have markers that look different:
(using the setGridStrokeXStyle function doesn't seem to have an effect. What is the correct way to accomplish this?)
Markers.map((marker) => {
const chartMarker = chart.addChartMarkerXY()
.setPosition({ x: new Date(marker.x) - startDate, y: marker.y });
chartMarker
.setResultTableVisibility(UIVisibilityModes.always)
.setResultTable((table) => table
.setContent([
['Type']
])
)
.setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
.setGridStrokeYVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerXVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerYVisibility(UIVisibilityModes.whenDragged)
.setDraggingMode(UIDraggingModes.notDraggable)
.setGridStrokeXStyle(new SolidLine({ fillStyle: new SolidFill({ color: ColorHEX("#FF69B4"), thickness: 2 }) })); //This doesn't seem to change the marker's appearance.
console.log("style", chartMarker.getGridStrokeXStyle());
});
The reason why in your code snippet the setGridStrokeXStyle is seemingly not having an effect is because the X grid stroke is not visible.
I have highlighted which element the "X grid stroke" is in the below picture with red to make sure:
As per why this is not visible in your example code, it is due to this method call which makes it so it is only displayed when the Chart Marker is being dragged.
.setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
Furthermore, this other method call makes it so that the Chart Marker can not be dragged, which results in the X grid stroke never being visible.
.setDraggingMode(UIDraggingModes.notDraggable)
Here are some examples of styling different parts of the Chart Marker properly:
I want to remove all the unnecessary space around chart even if it very small , So I tried this code
chart[0].setPadding({ bottom: 0,left:-5 ,right:-5,top:0});
chart[1].setPadding({ bottom: -5,left:-5 ,right:-5,top:0});
Still I get some space in top and bottom , please see the screenshot
Assuming that the screenshot is of a single dashboard. Then that line would be a dashboard splitter. You can remove it by setting the splitter style of dashboard to emptyFill with dashboard.setSplitterStyle
dashboard.setSplitterStyle(emptyFill)
That will remove the splitter line and let the charts to use the space it was using.
To get a chart with absolutely no unnecessary space around the chart, you will need to set:
chart title fill style to emptyFill
chart padding to 0
all axis tick styles to emptyTick
all axis stroke styles to emptyLine
all axis nib styles to emptyLine
dashboard splitter style to emptyLine
dashboard background stroke style to emptyLine
See the example below for how that would look like.
const {
lightningChart,
emptyLine,
emptyTick,
emptyFill
} = lcjs
const db = lightningChart().Dashboard({
numberOfColumns: 1,
numberOfRows: 2
})
const c1 = db.createChartXY({
columnIndex: 0,
columnSpan: 1,
rowIndex: 0,
rowSpan: 1
})
const c2 = db.createChartXY({
columnIndex: 0,
columnSpan: 1,
rowIndex: 1,
rowSpan: 1
})
const data = Array.from(Array(10)).map((_, i) => ({ x: i, y: Math.random() }))
const ser1 = c1.addLineSeries()
.add(data)
const ser2 = c2.addLineSeries()
.add(data.map((p) => ({ x: p.x, y: -p.y })))
// Hide titles and remove padding from chart
c1
.setTitleFillStyle(emptyFill)
.setPadding(0)
c2
.setTitleFillStyle(emptyFill)
.setPadding(0)
// Hide axis ticks, line and nibs
c1.getDefaultAxisX()
.setTickStyle(emptyTick)
.setStrokeStyle(emptyLine)
.setNibStyle(emptyLine)
c1.getDefaultAxisY()
.setTickStyle(emptyTick)
.setStrokeStyle(emptyLine)
.setNibStyle(emptyLine)
c2.getDefaultAxisX()
.setTickStyle(emptyTick)
.setStrokeStyle(emptyLine)
.setNibStyle(emptyLine)
c2.getDefaultAxisY()
.setTickStyle(emptyTick)
.setStrokeStyle(emptyLine)
.setNibStyle(emptyLine)
// Hide dashboard splitter and remove background stroke style.
db
.setSplitterStyle(emptyLine)
.setBackgroundStrokeStyle(emptyLine)
<script src="https://unpkg.com/#arction/lcjs#1.3.1/dist/lcjs.iife.js"></script>
I have created a line graph using highchart js .I want to set a grey color marker at the starting and a red colored mrker at the end of my graph.Is there a way to do it with highcharts?
In the load event (chart.events.load) you can extract first and last point from series. Then call update() function to modify fillColor parameter.
chart:{
events:{
load:function() {
var chart = this,
series = chart.series[0],
data = series.data,
len = data.length;
//first point
data[0].update({
marker:{
fillColor: 'gray'
}
},false);
//last point
data[len - 1].update({
marker:{
fillColor: 'red'
}
});
}
}
},
Example:
http://jsfiddle.net/s9erv8f0/