How do I move Plotly.js legend off second y axis - javascript

Plotly.js defaults to have the legend covering the second y axis. Here is their own code pen example of it happening:
https://codepen.io/plotly/pen/36d6c70e8fa17e471fa68788abbed90f
var trace1 = {
x: [1, 2, 3],
y: [40, 50, 60],
name: 'yaxis data',
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [4, 5, 6],
name: 'yaxis2 data',
yaxis: 'y2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Double Y Axis Example',
yaxis: {title: 'yaxis title'},
yaxis2: {
title: 'yaxis2 title',
titlefont: {color: 'rgb(148, 103, 189)'},
tickfont: {color: 'rgb(148, 103, 189)'},
overlaying: 'y',
side: 'right'
}
};
Plotly.newPlot('myDiv', data, layout);
I cannot get the legend to move more to the right. I have tried adjusting the margin/padding on the plot, the x position of the legend, the margin/padding on the legend, the overall size of the div, and the orientation of the legend.
On the topic of legend orientation, I could potentially put the legend below the plot to solve this problem. However, I am also having trouble implementing that. Here is my legend layout code:
legend: {orientation: 'h',
y: -0.17,
x: 0,
font: {
family:'Roboto',
size: 10,
color: 'rgb(54, 54, 54)'}
},
and here is what my graph looks like:
Clearly there is a lot of code missing here and this isn't a working example of the problem, but the orientation is not changing to horizontal.

What about placing it under the plot? Also you can adjust it's position with changing the x and y values inside the legend property.
var trace1 = {
x: [1, 2, 3],
y: [40, 50, 60],
name: 'yaxis data',
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [4, 5, 6],
name: 'yaxis2 data',
yaxis: 'y2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Double Y Axis Example',
yaxis: {
title: 'yaxis title'
},
yaxis2: {
title: 'yaxis2 title',
titlefont: {
color: 'rgb(148, 103, 189)'
},
tickfont: {
color: 'rgb(148, 103, 189)'
},
overlaying: 'y',
side: 'right'
},
legend: {
y: 1,
x: 1.1,
bgcolor: 'transparent',
}
};
Plotly.newPlot('myDiv', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 480px; height: 400px;">
<!-- Plotly chart will be drawn inside this DIV -->
</div>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>

I have the same issue with most of their documentation as well - they tell you what the property is for, but not what the acceptable values for the property are and what each one does. You can set the legend to be horizontal by doing the following:
layout:{
orientation: "h"
}

Related

Chart.js does not scale with two yAxis

I struggle to let my second y-Axis scale to my second data array.
The green data should be scaled according to the right y-Axis (not working).
The red data is correctly scaled to the left y-Axis.
<div id="chartWrapper" class="card-content column is-two-thirds">
<canvas id="myChart" height="250px"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
datasets: [{
label: 'Temperatur in C°',
yAxisID: 'A',
borderColor: "red",
data: 0
},
{
label: 'Niederschlagsmenge in mm',
yAxisID: 'B',
borderColor: "blue",
data: 0
}]
},
options: {
scales: {
A: {
type: 'linear',
beginAtZero: false,
position: 'left',
display: true
},
B: {
type: 'linear',
beginAtZero: false,
position: 'right',
display: true
}
}
}
});
</script>
</div>
Don't be confused with the data being 0, I add the data dynamically.
Thank you very much for any help.
This is because you are using V2 of chart.js in which the scales need to be configured as arrays like so:
new Chart(ctx, {
type: 'line',
data: {},
options: {
scales: {
yAxes: [{
id: 'A'
}, {
id: 'B'
}]
}
}
})

Chart.js Line Graph: Start a line in the middle of a graph

I'm wondering if it is possible to have a graph with multiple lines, but I want one of the lines to start from the middle of the graph, while the rest of the lines still start from all the way at the left. Is this possible? It'd look like this:
The green line is what I am talking about, whether it would be possible for a dataset to start from not all the way at the left
Yes this is possible, you can achieve this in 2 ways, 1 is to specify each datapoint using its x and y coordinate another one is to place some null values in the start of your data array:
var options = {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [{
x: 3,
y: 6
}, {
x: 4,
y: 8
}, {
x: 5,
y: 2
}, {
x: 6,
y: 12
}],
borderColor: 'orange'
},
{
label: '# of Points2',
data: [null, null, null, 9, 13, 15],
borderColor: 'lightblue'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
You can quickly do this with offset option.
Example:
const options = {
...otherChartOptions,
scales: {
x: {
offset: true
},
y: {
offset: true
}
}
};
Reference: https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

How do I remove non-integers in the axis of a plotly.js graph?

return {
height: 210,
title: title,
autosize: true,
width: '100%',
font: {
size: 10,
family: "Roboto"
},
showlegend: false,
margin: {
l: 40,
r: 10,
b: 35,
t: 22,
pad: 0
},
xaxis: {
nticks: 6,
title: "Score",
linecolor: '#cccccc',
zerolinewidth: 0,
zerolinecolor: '#fff'
},
yaxis: {
title: "Number of students",
linecolor: '#cccccc',
zerolinewidth: 0,
zerolinecolor: '#eeeeee',
range: [0, numStudents]
},
bargap: 0.5
};
This is including half steps as well 1.5 and so on. I am using plotly.js and this is what I see:
You can force Plotly to use defined distances between the axis' ticks by setting dtick in the layout options of your axis, i.e. in your case it would be
{yaxis: {dtick: 1}}
See below for an example of no layout settings vs fixed dtick.
var trace1 = {
x: ['A', 'B', 'C'],
y: [1, 3, 2],
mode: 'markers',
type: 'bar'
};
Plotly.newPlot('myPlot1', [trace1], {yaxis: {dtick: 1}});
Plotly.newPlot('myPlot2', [trace1]);
<script src="https://cdn.plot.ly/plotly-latest.min.js">
</script>
<div id = "myPlot1" ></div>
<div id = "myPlot2" ></div>

Multiple X shared axis in plot.ly subplots

I have two subplots with shared x axis and I want to be able to zoom them both - when I zoom one the second adjust automatically but I have problem: x axis can be presented only on first axis or only on second axis.
How can I display x axis below both plots?
Cheers, Fih
var trace1 = {
x: [1, 2, 3],
y: [2, 3, 4],
type: 'scatter'
};
var trace3 = {
x: [2, 3, 4],
y: [600, 700, 800],
xaxis: 'x',
yaxis: 'y3',
type: 'scatter'
};
var data = [trace1, trace3];
var layout = {
xaxis: {
domain: [0, 1],
anchor: ('y', 'y3'),
},
yaxis: {
domain: [0, 0.45],
},
yaxis3: {
domain: [0.55, 1]},
anchor: 'x',
};
Plotly.newPlot('compGraph', data, layout);
You can add "subplots" into layout:
var layout = {
grid: {
rows: 2,
columns: 1,
subplots:[['xy'], ['xy3']],
roworder:'bottom to top'},
};

How to prevent label overlapping? How to write text at a point relative to plotLines?

I have a tornado chart in which looks like this.
The overlap of labels occurs because they have same value in the series. I want the first label to be right aligned and second label to be left aligned so that both the labels will be visible.
Apart from this, I also have a vertical line chart whose labels need to be left aligned to the line and clearly visible outside the bar column.
JSFiddle link of the problem: http://jsfiddle.net/z2jyz7Ln/
The chart has a threshold 29.5 and the series is as follows:
series: [
{type:'line',color:'black',zIndex:505,
data:[[-0.25,29.5],[3.25,29.5]],
marker:{
enabled: false
}
},
{
threshold: 29.5,
name: 'Low',
grouping: false,
type: 'bar',
data: [{
x: 0,
y: 12.15,
}, {
x: 1,
y: 15.45,
}, {
x: 2,
y: 29.5,
}, {
x: 3,
y: 12.15,
}],
labels: [10, 5, 1, 2]
}, {
threshold: 29.5,
name: 'High',
grouping: false,
type: 'bar',
data: [{
x: 0,
y: 46.86,
}, {
x: 1,
y: 42.28,
}, {
x: 2,
y: 29.5,
}, {
x: 3,
y: 46.86,
}],
labels: [30, 10, 3, 4]
}]
I need to make the changes pointed out in the image. Basically, I need to use different dataLabel alignments within same series. How do I do that?
You can control position for each of dataLabels using point.dataLabel.x/y values: http://jsfiddle.net/z2jyz7Ln/1/
Code:
data: [
[-0.25, 29.5],
{
x:3.25,
y:29.5,
dataLabels: {
y: 20,
x: -20
}
}
],
Unfortunately you need to detect dataLabels collision on your own, Highcharts doesn't provide such method.

Categories