Develop Reference

Markers not working in a Nivo ResponsiveLineCanvas

I'm trying to switch from a ResponsiveLine to a ResponsiveLineCanvas using Javascript library Nivo version 0.80.0 and React 18.2.0, but markers are just not shown.
Not sure what I am missing, so I created an example to reproduce the issue
https://codesandbox.io/embed/fast-leftpad-q6ypqr?fontsize=14&hidenavigation=1&theme=dark
It is sufficient to switch from ResponsiveLineCanvas to ResponsiveLine and the marker get shown.
From the docs I cannot guess if the feature is unsupported in ResponsiveLineCanvas. So, am I missing any configuration?
import React, { useEffect, useState } from "react";
import { ResponsiveLineCanvas } from "#nivo/line";
import { ResponsiveLine } from "#nivo/line";
const commonProperties = {
width: 900,
height: 400,
margin: { top: 20, right: 20, bottom: 60, left: 80 },
animate: true,
enableSlices: "x"
};
const App = () => (
<div style={{ height: 600 }}>
<ResponsiveLineCanvas
{...commonProperties}
data={[
{
id: "Id of serie",
data: [
{ x: 0, y: 0.2 },
{ x: 1, y: 0.3 },
{ x: 2, y: 0.5 },
{ x: 3, y: 0.4 },
{ x: 4, y: 0.3 },
{ x: 5, y: 0.5 },
{ x: 6, y: 0.3 },
{ x: 7, y: 0.1 }
]
}
]}
markers={[
{
axis: "x",
value: 2,
lineStyle: { stroke: "#6aa84f", strokeWidth: 3, opacity: 0.95 },
legend: "Budget line"
}
]}
layers={[
"grid",
"axes",
"areas",
"lines",
"points",
"slices",
"mesh",
"legends",
"markers"
]}
enableGridX={false}
colors={["rgb(97, 205, 187)", "rgb(244, 117, 96)"]}
xScale={{
type: "linear"
}}
yScale={{
type: "linear",
stacked: false,
min: 0,
max: 1
}}
enableArea={true}
areaOpacity={1}
enableSlices={false}
useMesh={true}
crosshairType="cross"
/>
</div>
);
export default App;

Looking at the source code, it's clear that support for markers has not been implemented in the LineCanvas and ResponsiveLineCanvas components. There is no mention of markers anywhere in the component source. The markers prop is not included in the destructuring assignment so that prop will be ignored and have no effect.
As for the layers prop, this Canvas version goes through a bunch of if statements to check for known layer types. "marker" is not one of these types. There is no else statement that lets you know if a provided layer was invalid, it just doesn't do anything.
The supported values of the layers prop, per the source code, are:
"grid"
"axes"
"areas"
"lines"
"points"
"mesh"
"legends"
custom functions
On the other hand, the SVG-based Line and ResponsiveLine components do use the markers prop and support layers=["markers"]. You can see here how the markers prop is passed off to a CartesianMarkers component from the #nivo/core package and the resulting element is stored in the layerById dictionary.

Echarts: Is there any way to add images to charts?

I'm using Echarts to create treemap.
I want to change the color of the tree to image.
Like this.
itemStyle: {
color: {
image: require("./french.png"),
},
},
I tried to use itemStyle, but it doesn't work! Is there a better way?

You can always use the graphic component. It let's you add any graphic object to your chart with given coordinates.
Just check the documentation of this component to know how to use it. https://echarts.apache.org/en/option.html#graphic

I managed to add a unique image to each label within series data like this:
{
"value": 23,
"name": "Arizona",
"path": "US/Arizona",
label: {
show: true,
formatter: '{b}',
color: 'rgba(0,0,0,0)',
backgroundColor: {
image: 'image1.jpg',
},
},
},

You can have a look at one of their examples which uses images:
https://echarts.apache.org/examples/en/editor.html?c=wind-barb
{
type: 'image',
style: {
image: api.value(dims.weatherIcon),
x: -weatherIconSize / 2,
y: -weatherIconSize / 2,
width: weatherIconSize,
height: weatherIconSize
},
position: [point[0], 110]
},

Line in C3.js goes out of the chart area

I am facing a bug in C3.js chart library. When you look at the image you can see that the line chart goes out of the "chart-area" and it is not visible in some peak-cases. I would omit the thing that the label is not visible but I would be happy to see the line without hidden parts.
Here is a config for reproducing the error:
const config = {
x: {
tick: {
rotate: -45,
format: '%Y-%m-%d %H:%M:%S'
},
type: 'timeseries',
height: 85,
padding: {left: 30}
},
y: {
label: {position: 'outer-middle', text: 'Event count'},
min: 0,
padding: {top: 0, bottom: 0}
}
},
bindto: '#single-chart',
color: {pattern: ['#323f71']},
data: {
x: 'x',
xFormat: '%Y-%m-%d %H:%M:%S',
labels: true,
type: 'area-spline'
},
legend: {show: false},
size: {height: 380},
padding: {
right: 50,
left: 80
},
grid: {
y: {
show: true
}
}
};
Does anybody now, how to fix this?

I think the answer is to related to the axis.y.padding.top = 0 setting. However, my example looks slightly different from yours in that I never lose the line plot. The only way I can replicate yours is to set axis.y.max=1400, which then does chop the top of the plot off. If not then please could you unhide the y-axis line and post another image because it will be useful to see if the line terminator tick is there at the top of the axis.
See working snippet below which is modelled on your code and case but not exactly the same as slightly re-written. The button toggles between y.top padding of 20 and zero to illustrate the effect. You can see the highest plot point label becoming clipped off by the top limit. You may want to experiment with removing the setting entirely.
// Cannot find a usable method for changing axis.y.padding.top so redrawing the chart to show effect.
function resetIncPadding(yPaddingTop){
var chart = c3.generate(
{
bindto: '#chart',
size: {
width: 600,
height: 200
},
data: {
x: 'x',
// xFormat: '%Y-%m-%d %H:%M:%S',
labels: true,
type: 'area-spline',
columns: [
['x',
'2018-01-01','2018-01-02','2018-01-03','2018-01-04','2018-01-05','2018-01-06','2018-01-07','2018-01-08','2018-01-09','2018-01-10','2018-01-11','2018-01-12','2018-01-13','2018-01-14','2018-01-15','2018-01-16','2018-01-17','2018-01-18','2018-01-19','2018-01-20','2018-01-21','2018-01-22','2018-01-23','2018-01-24','2018-01-25','2018-01-26','2018-01-27','2018-01-28','2018-01-29','2018-01-30','2018-01-31'
],
['y', 5,10,15,10,10,10,10,5,30,90,500,1000,1200,1500,1230,1110,620,80,30,10,5,15,5,5,15,5,15,12,15,10,10
]
]
},
color: {pattern: ['#323f71']},
axis: {
x: {
type: 'timeseries',
tick: {
rotate: -45,
format: '%Y-%m-%d %H:%M:%S'
},
height: 85,
padding: {left: 30}
},
y: {
label: {position: 'outer-middle', text: 'Event count'},
min: 0,
padding: {top: yPaddingTop, bottom: 0}
}
},
legend: {show: false},
padding: {
right: 50,
left: 80
},
grid: {
y: {
show: true
}
}
});
}
// this is all about toggling the padding.
$('#toggle').on('click', function(e){
val = $(this).val();
val = (parseInt(val,10) === 20 ? 0 : 20);
$(this).val(val).html(val)
resetIncPadding(val);
console.log(val)
})
// first draw on startup
resetIncPadding(20);
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"></script>
<p>Using axis.y.padding.top = <button id='toggle' value='20'>20</button></p>
<div class='chart-wrapper'>
<div class='chat' id="chart"></div>
</div>

Adjust vis.js options to avoid crossed edges/overlapping

So I've read this post, where someone visualizes 4chan posts in a graph. It looks very cool so I wanted to try it out myself. Everything is working good but I'm having some problems with my visjs options.
I am trying to get as close to the options he used. Sadly he hasn't posted them anywhere.
This is what I've got so far:
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30,
customScalingFunction: function (min,max,total,value) { return value },
label: {
min: 8,
max: 30,
drawThreshold: 12,
maxVisible: 20
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {inherit: 'from'},
smooth: {
type: 'continuous'
}
},
physics: {
barnesHut: {
springLength: 1000,
springConstant: 1,
avoidOverlap: 1
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
}
};
My Problem is, that they still don't seem quite right and I also have trouble with overlapping nodes.
JSFiddle
Sorry for the unclean code.

How to add a custom 3d object in awe.js?

I am trying to add a custom 3d object in awe.js, I have tried with the cubes and sphere geometries, but haven't found any documentation that facilitates adding a 3d object. Any ideas?
awe.projections.add({
id:'n',
geometry:{ path:'cube.obj'},
rotation:{ x:30, y:30, z:0 },
material:{
type: 'phong',
color:0x000000,
},
}, { poi_id: 'north' });

using new libraries you can do it as shown below, I've copied that from my answer in another question (awe.js Augmented Reality adding text).
awe.pois.add({ id:'jsartoolkit_marker_64', position: { x:0, y:0, z:0 }, scale: { x: 1, y: 1, z: 1 } });
awe.projections.add({
id:'marker_projection',
geometry: { path: 'models/obj/example.obj' }, // path to your model
position: { x: 0, y: 0, z: 0 },
rotation: { x: 0, y: 180, z: 0 },
material:{ path: 'models/obj/example.mtl' }, // path to material if you're using one
visible: false,
}, { poi_id: 'jsartoolkit_marker_64' }); // common point of interest, in this case the marker