My chart looks like so::
and here is my code:
linePlot = Plot.plot({
marginLeft: 60, // space to the left of the chart
y: {
type: "log", // set the type
},
marks: [
Plot.line(data, {x: "timestamp", y: "views", z:"artist", title: d=>`${d.artist}`,})
]
})
I want to highlight or change color of each line when the mouse is over it.
The easiest thing to do would be to attach a pointerenter event to the lines. Since you're using Observable, to use D3 to handle that process. Here's what it looks like on Observable:
https://observablehq.com/d/2e1daf099a7aaaea
To be clear, you are using two libraries: D3 and Plot, both of which are automatically available on Observable. You can use them both in vanilla Javascript pretty easily, though:
// Manufacture some data
let pt_lists = d3.range(10).map(() => {
let cur = 0;
return d3.range(1000).map(function(x) {
let step = 2 * d3.randomInt(0, 2)() - 1;
cur = cur + step;
return [x, cur];
});
});
// Plot the data
let plot = Plot.plot({
marks: pt_lists.map((pts) => Plot.line(pts, {
strokeWidth: 2
}))
});
// Here's where the action is.
// We use d3 to select all the paths in the plot
d3.select(plot)
.selectAll("path")
// React when the pointer hovers over the path.
.on("pointerenter", function() {
d3.select(plot).selectAll("path").attr("opacity", 0.2);
d3.select(this).attr("opacity", 1);
});
// Reset the appearance when the pointer leaves the SVG
d3.select(plot).on("pointerleave", function() {
d3.select(plot).selectAll("path").attr("opacity", 1);
});
// Attach the plot to the container DIV
d3.select('#chart').append(() => plot)
<script src="https://cdn.jsdelivr.net/npm/d3#7"></script>
<script src="https://cdn.jsdelivr.net/npm/#observablehq/plot#0.6"></script>
<div id="chart" style="width: 600px; height: 400px"></div>
It might also be possible to do the interaction in css:
d3.select(chart)
.append("svg:style")
.text(`
path:hover {stroke-width: 2px;}
`)
While trying to create a funnel chart Mod in Spotfire using Plotly.js library, somehow plotly events are not working. Following the plotly documentation, we tried to add "plotly_selected", "plotly_hover" and "plotly_unhover" events which are triggered in the connecting area between the points rather than actual points.
We notice that the events are triggered when the mouse pointer is outside of the plotly chart elements. However, when we move the mouse pointer over the chart elements, the events are not triggered. We are unsure as to how to troubleshoot further. The code we have written works in a web browser, but not inside our application (Spotfire).
Below is Data preparation for chart:
for (const colorLeaf of colorLeafNodes) {
data.push({
type: "funnel",
name: colorLeaf.formattedPath(),
y: colorLeaf.rows().map((y) => y.categorical("Category").formattedValue()),
x: colorLeaf.rows().map((x) => x.continuous("Value Axis").value()),
textposition: "inside",
hoverinfo: "none",
textinfo: "value+percent initial",
textfont: {
family: styling.general.font.fontFamily,
size: styling.general.font.fontSize,
color: styling.general.font.color.bgBlack
},
marker: {
color: colorLeaf.rows().map((row) => row.color().hexCode)
}
});
}
Here is the Chart Div:
var chartDiv = document.getElementById("mod-container");
Plotly marking event
chartDiv
.on("plotly_selected", function (eventData) {
console.log("plotly_selected");
console.log(eventData.points);
let categories = [];
let colorValues = [];
if (eventData != null) {
if (eventData.points.length == 0) {
dataView.clearMarking();
return;
}
eventData.points.forEach((d) => {
console.log(d);
categories.push(d.y);
colorValues.push(d.data.name);
});
let rowsToMark = rows.filter(
(d) =>
categories.includes(d.categorical("Category").formattedValue()) &&
colorValues.includes(d.categorical("Color").formattedValue())
);
dataView.mark(rowsToMark);
}
})
After deeper troubleshooting, we found that CSS code was the troublemaker. After removing .points g path { pointer-events: all; } from CSS, plotly events were working smoothly with Mods.
I have a bar chart where I have drawn 3 vertical lines, each with it's own label at the top. I would like those labels to be above the top of the y-axis (above the 30% line in the example) but below the legend. I can't figure out how to increase the space between the top legend and the chart such that I can have my vertical line labels (15, 24 & 33) be off of the chart itself but below the legend. Any ideas?
If you want do increase spacing in all charts you can put this code before creating :
Chart.Legend.prototype.afterFit = function() {
this.height = this.height + 50;
};
Of course, I don't try but i think you can change it (or copy the original Chart object before, to keep the original padding).
Bye,
If you want to apply padding below legend for some charts only in your app:
ChartJS >= 2.1.0
Chart.plugins.register({
id: 'paddingBelowLegends',
beforeInit: function(chart, options) {
chart.legend.afterFit = function() {
this.height = this.height + 50;
};
}
});
// ----------------------------------
// disable the plugin only for charts
// where you DO NOT WANT the padding
// ----------------------------------
// for raw ChartJS use:
var chart = new Chart(ctx, {
config: {
plugins: {
paddingBelowLegends: false
}
}
});
// for angular-chartjs:
$scope.myChart.options.plugins = { paddingBelowLegends: false }
// then in template:
// <canvas class="chart ..." chart-options="myChart.options" ... />
ChartJS >= 2.5.0
Specific plugins for each chart are supported, it should be possible to do:
var chart = new Chart(ctx, {
plugins: [{
beforeInit: function(chart, options) {
chart.legend.afterFit = function() {
this.height = this.height + 50;
};
}
}]
});
See ChartJS documentation + inspired by this other answer
Unfortunately, since there is no config option to handle this the only way you can achieve the desired result is to extend Chart.Legend and implement the afterFit() callback.
Here is a quick codepen showing how to do just that. To change the spacing, just change the value in line 9 (currently set to 50). Also, this of course only works with the legend at the top. Hopefully, the example is clear enough for you to modify in case you want to move your legend elsewhere.
If anyone is wondering why the afterFit solution is not working in Chart.js 3.3.0 it is because afterFit function was removed from the legend plugin.
If you want to make this work anyway by taking advantage over the fit function, you can try this hacky solution / workaround:
const plugin = {
beforeInit(chart) {
// Get reference to the original fit function
const originalFit = chart.legend.fit;
// Override the fit function
chart.legend.fit = function fit() {
// Call original function and bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)();
// Change the height as suggested in another answers
this.height += 15;
}
};
}
I know that this is not an ideal solution, but until we have native support for this legend padding, I'm afraid this is as good we can do right now.
This helped me after 2 days of research.
Chart.Legend.prototype.afterFit = function() {
this.height = this.height + 50;
};
update this in module.ts file
I'm using react-chartjs-2 (but this is just a port and uses the same configurations object) and I was able to achieve that by changing the labels configuration nested on legend configuration:
chartOptions = {
legend: {
labels: {
padding: 50 -> this one.
}
},
You can check the property description here:
https://www.chartjs.org/docs/latest/configuration/legend.html
Hope it helps.
I have tried the above approaches on my react(react-chartjs-2) project but no luck. Here I have one different approach like creating custom legends outside the chart. so you can get more control over it
Hide default legend
Get legend object using any ref method.
Loop and make a custom legend using html and css.
Sample codesanbox
I am aware that OP is not about reactjs component, but as it is a common issue it will help someone.
Orginal reference
.
For ng2-charts#^3.1.0, following this answer works with an addition:
this.options.labels.padding = 40;
//this.height += 15;
or the title.padding config (this'll create an invisible title under the graph so it's a bit hacky):
plugins: {
legend: {
display: true,
position: 'bottom',
title: {
display: true,
padding: 10,
},
Stackblitz
After searching the chart.js file I found out that the height of the labels bar is defined there in
height = this._fitRows(titleHeight, fontSize, boxWidth, itemHeight)
OR
this.height = Math.min(height, options.maxHeight || this.maxHeight)
in the fit() function
fit() {
const {options, ctx} = this;
if (!options.display) {
this.width = this.height = 0;
return;
}
const labelOpts = options.labels;
const labelFont = toFont(labelOpts.font);
const fontSize = labelFont.size;
const titleHeight = this._computeTitleHeight();
const {boxWidth, itemHeight} = getBoxSize(labelOpts, fontSize);
let width, height;
ctx.font = labelFont.string;
if (this.isHorizontal()) {
width = this.maxWidth;
height = this._fitRows(titleHeight, fontSize, boxWidth, itemHeight);
} else {
height = this.maxHeight;
width = this._fitCols(titleHeight, fontSize, boxWidth, itemHeight);
}
this.width = Math.min(width, options.maxWidth || this.maxWidth);
this.height = Math.min(height, options.maxHeight || this.maxHeight) + 40;}
And I changed it to +40 as shown above. and it worked fine for me so I wanted to share.
If you want to apply padding below legend for some charts only in your app:
ChartJS >= 2.1.0
Note: make sure to add this in plugins and not inside options.plugins.
Chart.plugins.register({
id: 'paddingBelowLegends',
beforeInit: function(chart, options) {
chart.legend.afterFit = function() {
this.height = this.height + 50;
};
}
});
// ----------------------------------
// disable the plugin only for charts
// where you DO NOT WANT the padding
// ----------------------------------
// for raw ChartJS use:
var chart = new Chart(ctx, {
config: {
plugins: {
paddingBelowLegends: false
}
}
});
For React Users using react-chartjs-2:
import { Line } from "react-chartjs-2";
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from "chart.js";
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
<Line
data={{
datasets: trendsData?.map((trend, idx) => ({
type: "line",
label: trend.domainName,
data: trend.domainTrends.map(d => d.value),
backgroundColor: getDomainColor(idx).backgroundColor,
borderColor: getDomainColor(idx).color,
pointRadius: 0,
tension: 0.3
})),
labels: trendsData?.[0]?.domainTrends.map(d => d.date)
}}
options={{
plugins: {
legend: {
display: true,
align: "start",
labels: {
font: { size: 14 }
}
}
}
}}
plugins={[
{
id: "increase-legend-spacing",
beforeInit(chart) {
// Get reference to the original fit function
const originalFit = (chart.legend as any).fit;
// Override the fit function
(chart.legend as any).fit = function fit() {
// Call original function and bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)();
this.height += 20;
};
}
}
]}
/>
I know this is not what OP really wants but at least for newer version, and the one I use - 4.0.1 - there is no way to increase the margin between the legend box and the chart, that I have been able to find at least, so this is an obvious workaround. So in order to avoid this problem:
I had to change the position of the leyend box below the chart with this option configurations:
options = {
layout: {
padding: 30
},
parsing: {
key: 'nested.value'
},
plugins: {
datalabels: {
color: '#36A2EB'
},
tooltip: {
enabled: true
},
legend: {
position: 'bottom',
align: 'center',
labels: {
padding: 20,
}
}
}
};
Note: To add the values at the top of the bars I had to add the npm package chartjs-plugin-datalabels with the following features inside your datasets config:
datasets: [
{
label: "Ejercido",
data: source.map( s => s.ejercidoTotal),
datalabels: {
anchor: 'end',
clamp: true,//this makes one datalabel not visible if it crashed with other one
display: 'auto',
align: 'top',
color: '#333333',
formatter
}
},
...
]
With this as the end result:
If you are using react-chartjs-2 library to show chart in a React app. You can use the below solution:
const plugin = {
beforeInit: function (chart) {
// Get reference to the original fit function
const originalFit = chart.legend.fit
// Override the fit function
chart.legend.fit = function fit() {
// Bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)()
this.height += 20 // Change the height
}
}
}
export const ReactChart2Example = (props) => {
const { data = [] } = props;
return (
<div>
<Chart plugins={[plugin]} type ="bar" data={data}/>
</div>
);
};
We have to pass plugins prop separately in React js Chart component and not inside options.
Reference: https://github.com/chartjs/Chart.js/issues/10388#issuecomment-1217363379
You can use layout property under options. This helped me:
layout: {
padding: {
left: 50,
right: 130,
top: 0,
bottom: 0
}
}
I have a webpage with 4 d3 charts for each of 11 different regions. One of those charts is an area chart and the code snippet is:
for (mm=0; mm<regions.length; mm++) {
areas.append("path")
.attr("class",function(d,i){ return "area cons ar"+i+" region"+mm;} )
.attr("id", function(d,i) { return "area_"+i+"_"+mm})
.attr("d", function(d,i) { return area(d)} );
var test = d3.selectAll("path.region"+mm)
.call(d3.helper.tooltip()
.attr("class", function(d, i) { return "tooltip"; })
.text(function(d, i){
console.log(mm);
return "i "+consSubProducts[i]+', i: '+i;}));
}
I want to add tooltips to the charts. In the area plot, each region has different products. Some have 7 products, others have 5. I need to use the mm variable at its runtime values (0-10) to call the correct product array where consSubProducts is currently. (ConsSubProducts is set to a different product array at the top of the for...loop, but as with mm, the code can only see the finally-set array and not the runtime arrays.)
In this code, mm always returns 11, i.e. it returns the final value of mm rather than the values at runtime.
I have tried passing mm in within tooltip() and within .text(function(d,i,mm) - the latter clearly doesn't work as it's expecting a j. I've also tried attaching mm to the class or ID of an object, but within the call() console.log(this) logs object.window.
I've tried modifying tooltip.js but although I can generate the label I want I can't work out how to override the text. Tooltip.js:
d3.helper = {};
d3.helper.tooltip = function(){
var tooltipDiv;
var bodyNode = d3.select('body').node();
var attrs = {};
var text = '';
var styles = {};
function tooltip(selection){
selection.on('mouseover.tooltip', function(pD, pI){
var name, value;
// Clean up lost tooltips
d3.select('body').selectAll('div.tooltip').remove();
// Append tooltip
tooltipDiv = d3.select('body').append('div');
tooltipDiv.attr(attrs);
tooltipDiv.style(styles);
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style({
left: (absoluteMousePos[0] + 10)+'px',
top: (absoluteMousePos[1] - 15)+'px',
position: 'absolute',
'z-index': 1001
});
// Add text using the accessor function, Crop text arbitrarily
tooltipDiv.style('width', function(d, i){ return (text(pD, pI).length > 80) ? '300px' : null; })
.html(function(d, i){return text(pD, pI);});
})
.on('mousemove.tooltip', function(pD, pI){
// Move tooltip
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style({
left: (absoluteMousePos[0] + 10)+'px',
top: (absoluteMousePos[1] - 15)+'px'
});
// Keep updating the text, it could change according to position
tooltipDiv.html(function(d, i){ return text(pD, pI); });
})
.on('mouseout.tooltip', function(pD, pI){
// Remove tooltip
tooltipDiv.remove();
});
}
tooltip.attr = function(_x){
if (!arguments.length) return attrs;
attrs = _x;
return this;
};
tooltip.style = function(_x){
if (!arguments.length) return styles;
styles = _x;
return this;
};
tooltip.text = function(_x){
if (!arguments.length) return text;
text = d3.functor(_x);
return this;
};
return tooltip;
};
Any help appreciated!
It looks like this is way over the top for something that is super simple. Unless I'm missing something. Let me post some code for how I handle tooltips.
Predefine the tooltip div in the page HTML and class it .tooltip and apply the css of display:none; position:absolute; and add .tooltip.show{display:block;}
var tooltip = d3.select('.tooltip');
function tipUpdate(d,i) {
tooltip.classed('show',true).html(d+" : "+i);
}
areas.append('path')
//all your path attributs
.on('mouseover', tipUpdate)
.on('mouseout', function() { tooltip.classed('show',false); });
areas.on('mousemove', function(d,i) {
var mouse = d3.mouse('body').map( function(d) { return parseInt(d); });
tooltip.attr("style", "left:"+(mouse[0]+10)+"px;top:"+(mouse[1]-15)+"px");
});
This will show the tooltip div on mouseover of the path and move the tooltip relative to it's position in the body and hide the tooltip when the mouse leaves the path. It will display the data and index of the point in the path that it is currently over. You might want to change that but it should be easy.
One problem I thought about later is you cannot do a working tooltip like this on a path. It will always show the data from the last point in the path.
I have posted a working fiddle. D3 tooltip
I am using Wijmo barcharts and am trying to create a graph which has images instead of labels on the x axis.
This is the code I have currently got, however, the image source is being printed out as a string rather than showing the image. Does anybody know of a way around this?
$(document).ready(function () {
defaultPalette = ['#e11a00', '#ddcd0e', '#005698'];
$("#wijbarchart").wijbarchart({
horizontal:false,
hint: {
content: function () {
return this.data.label + '\n ' + this.y + '';
}
},
seriesList: [{
label: "Entries",
legendEntry: true,
data: {
x: [<img src="photos/image1.jpg" />,<img src="photos/image2.jpg" />,<img src="photos/image3.jpg" />],
y: [22,10,65]
}
}],
painted: function (args) {
var bars = $(this).data('fields').chartElements.bars
if (bars.length > 0) {
for (var i in bars) {
bars[i].attr({ fill: defaultPalette[i % defaultPalette.length]});
}
}
},
mouseOut: function (e, data) {
data.bar.attr({ fill: defaultPalette[data.index % defaultPalette.length]});
}
});
});
Thanks!
Currently, there is no support for displaying images in place of valuelabels. However, I have made an enhancement for same to the development team and hopefully, it will be supported in future builds.
Regards
Ashish