Is it possible to add draw a rectangle as a background of Line chart? I'm using react-chartjs-2 and cannot find any examples with drawing a canvas as background...
managed to do this with following code:
const plugins = [
{
beforeDraw: (chartInstance, easing) => {
const ctx = chartInstance.chart.ctx;
ctx.fillStyle = "lightgreen";
ctx.fillRect(30, 200, 955, 50);
},
},
];
//...
<Line
data={data}
plugins={plugins}
/>
You can draw it before the Line chart with drawTime: 'beforeDatasetsDraw'
Related
I need to only show two shapes in my custom Tui image editor, a rectangle and a circle, nothing more nothing less.
I added the rectangle and it works perfectly but if I add another function to add a circle and draw either or first the and then select the other, it still draws the first item. (if you click on a circle and draw, then click on the rectangle and draw then it draws a circle)
I am not sure how I can get this to function properly.
here is my two functions for my circle and rectangle.
const onAddCircle = () => {
imageEditorRef.current.startDrawingMode('SHAPE');
if (imageEditorRef.current.getDrawingMode() !== 'SHAPE') {
const { height } = imageEditorRef.current.getCanvasSize();
imageEditorRef.current.startDrawingMode('SHAPE');
imageEditorRef.current.setDrawingShape('circle', {
fill: 'transparent',
stroke: COLOR_STATUS_ORANGE,
strokeWidth: height / 100,
isRegular: true,
});
}
};
const onAddRectangle = () => {
if (imageEditorRef.current.getDrawingMode() !== 'SHAPE') {
const { height } = imageEditorRef.current.getCanvasSize();
imageEditorRef.current.startDrawingMode('SHAPE');
imageEditorRef.current.clearObjects();
imageEditorRef.current.setDrawingShape('rect', {
fill: 'transparent',
stroke: COLOR_STATUS_ORANGE,
strokeWidth: height / 100,
isRegular: true,
});
}
};
and they are triggered by buttons
<button
onClick={onAddCircle}
color="green"
/>
<button
onClick={onAddRectangle}
color="red"
/>
I've tried adding imageEditorRef.current.clearDrawingShape(); to the beginning of the functions but it says its not a function because it doesn't exist. then I tried adding imageEditorRef.current.clearObjects(); but that clears everything that it draw by that shape.
I've looked their documentation as well and there is nothing on how to actually clear shape cache before drawing or selecting another shape.
Could someone please help ?
I fixed it!
Ive combined both functions into one added a prop called shape, and it checks if the prop is set to either or and then if it is then it uses that logic else it clears the drawing board.
const drawShape = (Shape) => {
const { height } = imageEditorRef.current.getCanvasSize();
imageEditorRef.current.startDrawingMode('SHAPE');
if (Shape === 'circle') {
imageEditorRef.current.setDrawingShape('circle', {
fill: 'transparent',
stroke: COLOR_STATUS_ORANGE,
strokeWidth: height / 100,
isRegular: true,
});
} else if (Shape === 'rectangle') {
imageEditorRef.current.setDrawingShape('rect', {
fill: 'transparent',
stroke: COLOR_STATUS_ORANGE,
strokeWidth: height / 100,
isRegular: true,
});
} else {
imageEditorRef.current.stopDrawingMode();
}
};
I am trying to adapt the example Display HTML clusters with custom properties for react-map-gl.
I got basic clusters without custom styling working (adapted from Create and style clusters):
<ReactMapGL ref={mapRef}>
<Source id="poi-modal-geojson" type="geojson" data={pointsToGeoJSONFeatureCollection(points)}
cluster={true}
clusterMaxZoom={14}
clusterRadius={50}
>
<Layer {...{
id: 'clusters',
type: 'circle',
source: 'poi-modal-geojson',
filter: ['has', 'point_count'],
paint: {
'circle-color': [
'step',
['get', 'point_count'],
'#51bbd6',
100,
'#f1f075',
750,
'#f28cb1'
],
'circle-radius': [
'step',
['get', 'point_count'],
20,
100,
30,
750,
40
]
}
}} />
<Layer {...{
id: 'unclustered-point',
type: 'circle',
source: 'poi-modal-geojson',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#11b4da',
'circle-radius': 4,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff'
}
}} />
</Source>
</ReactMapGL>
Here, pointsToGeoJSONFeatureCollection(points: any[]): GeoJSON.FeatureCollection<GeoJSON.Geometry> is a function returning a GeoJSON (adapted from here).
However, I need more complex styling of markers and I am trying to adapt Display HTML clusters with custom properties without success so far. I mainly tried to adapt updateMarkers() and to call it inside useEffect():
const mapRef: React.Ref<MapRef> = React.createRef();
const markers: any = {};
let markersOnScreen: any = {};
useEffect(() => {
const map = mapRef.current.getMap();
function updateMarkers() {
const newMarkers: any = {};
const features = map.querySourceFeatures('poi-modal-geojson');
// for every cluster on the screen, create an HTML marker for it (if we didn't yet),
// and add it to the map if it's not there already
for (const feature of features) {
const coords = feature.geometry.coordinates;
const props = feature.properties;
if (!props.cluster) continue;
const id = props.cluster_id;
let marker = markers[id];
if (!marker) {
let markerProps = {
key: 'marker' + id,
longitude: coords[0],
latitude: coords[1],
className: 'mapboxgl-marker-start'
}
const el = React.createElement(Marker, markerProps, null),
marker = markers[id] = el;
}
newMarkers[id] = marker;
if (!markersOnScreen[id]) {
// TODO re-add
// marker.addTo(map);
}
}
// for every marker we've added previously, remove those that are no longer visible
for (const id in markersOnScreen) {
if (!newMarkers[id]) delete markersOnScreen[id];
}
markersOnScreen = newMarkers;
}
// after the GeoJSON data is loaded, update markers on the screen on every frame
map.on('render', () => {
if (!map.isSourceLoaded('poi-modal-geojson')) return;
updateMarkers();
});
}, [points]);
Unfortunately, the Marker created using React.createElement() isn't displayed I am not sure what is the right approach to create Marker elements in updateMarkers() or if my approach is completely wrong.
There is a great article on marker clustering which uses the supercluster and use-supercluster libraries and it makes clustering really easy not only for map box but for other map libraries as well, you can find it here.
You just have to convert your points into GeoJSON Feature objects in order to pass them to the useSupercluster hook and for the calculations to work. It will return an array of points and clusters depending on your current viewport, and you can map through it and display the elements accordingly based on the element.properties.cluster flag.
The properties property of the GeoJSON Feature object can be custom so you can pass whatever you need to display the markers later on when you get the final cluster array.
What I'm trying to do is I want to plot a line which represents the values of predictions and 2 other lines which represent the upper 95% Confidence Interval and the lower 95% Confidence Interval. I want to achieve this using Ant Design Charts. What I have so far is a Multi Line Chart, but I want the confidence Interval to be an area.
My data:
const data = [
{"date":"2021-11-17", "category":"upper_95", "value":23.87625},
{"date":"2021-11-17", "category":"lower_95", "value":20.32322},
{"date":"2021-11-17", "category":"prediction","value":21.21381},
{"date":"2021-11-18", "category":"upper_95", "value":25.87625},
{"date":"2021-11-18", "category":"lower_95", "value":22.32322},
{"date":"2021-11-18", "category":"prediction","value":19.21381},
{"date":"2021-11-19", "category":"upper_95", "value":26.87625},
{"date":"2021-11-19", "category":"lower_95", "value":24.32322},
{"date":"2021-11-19", "category":"prediction","value":25.21381},
...
]
My code so far:
const Graph = () => {
const config = {
data,
xField: "date",
yField: "value",
seriesField: "category",
...
};
return <Line {...config} />
};
"Ant Design Charts" support area charts:
https://charts.ant.design/en/examples/area/stacked#basic-slider
Instead of:
return <Line {...config} />
Try with:
return <Area {...config} />
I am trying to add a plotline on click in multiple series line chart in reactjs. I am using stockchart of high chart, Please let me know how to add plotline with tooltip.
Sample Screenshot:
I prepared a demo which shows how to add the plotLine dynamically with the custom tooltip.
Demo: https://jsfiddle.net/BlackLabel/Lyr82a5x/
btn.addEventListener('click', function() {
chart.xAxis[0].addPlotLine({
value: 5.5,
color: 'red',
width: 2,
id: 'plot-line-1',
events: {
mouseover() {
let lineBBox = this.svgElem.getBBox();
tooltip.style.display = 'block';
tooltip.style.left = lineBBox.x + 'px';
},
mouseout() {
tooltip.style.display = 'none'
}
}
})
})
If something is unclear - feel free to ask.
API: https://api.highcharts.com/highcharts/xAxis.plotLines.events.mouseout
API: https://api.highcharts.com/class-reference/Highcharts.Axis#addPlotLine
I used angular-chart.js in my website to create a Pie chart, and I would like to customize the legend. By default, the legend shows the color and the label. (As shown in the picture below) I would like to add the value/data of that label, like what it shown in the tooltip of the chart.
This is my HTML code:
<canvas id="pie" class="chart chart-pie"
chart-data="chartData" chart-labels="chartLabels" chart-options="chartOptions">
</canvas>
Based on the angular-chart.js documentation, legend is now a Chart.js option so the chart-legend attribute has been removed.
That is why, in my JS code I've tried to add generateLabels, just in case this is what I need to customize the legend:
$scope.chartOptions = {
legend: {
display: true,
labels: {
generateLabels: function(chart){
console.log(chart.config);
}
}
}
};
But whenever I add this lines, it will not show the chart. I think it is an error or something. And I'm not sure, if generateLabels is the right option that I needed.
Can somebody teach me the right way to customize the legend to achieve what I wanted?
Thanks in advance!
Let me try shedding some light/answering your question:
generateLabels: does make custom labels,and replaces templates from v1 but in order to use it you have to get your chart information and reimplement legend labels adhering to the Legend Item Interface found in the docs and code. Sounds a bit cryptic, but in practice is somehow simple and goes like this:
var theHelp = Chart.helpers;
// You need this for later
// Inside Options:
legend: {
display: true,
// generateLabels changes from chart to chart, check the source,
// this one is from the doughnut :
// https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.doughnut.js#L42
labels: {
generateLabels: function(chart) {
var data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0];
var arc = meta.data[i];
var custom = arc && arc.custom || {};
var getValueAtIndexOrDefault = theHelp.getValueAtIndexOrDefault;
var arcOpts = chart.options.elements.arc;
var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
return {
// And finally :
text: ds.data[i] + "% of the time " + label,
fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
index: i
};
});
}
return [];
}
}
}
Result:
Codepen: Chart.js Pie Chart Custom Legend Labels
There are other alternatives, if you notice on the pen/pie, the slices also have data information, that is from a plugin (check the pen)
Still another option, is to render the legend labels off canvas,for instance:
myPieChart.generateLegend();
Which gives you this Html:
"<ul class='0-legend'><li><span style='background-color:black'> </span>she returns it </li><li><span style='background-color:white'></span>she keeps it</li></ul>"
I haven't tried it, but I think you can modify it with the global method for your data Legend on the callback an it will give you a block of Html you can insert off canvas.