I'm trying to make a histogram using highcharts, but the data is being bucketed by the server so as far as I can tell, I can't use the histogram chart type.
Here's my chart:
Highcharts.chart('container', {
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
type: 'category',
labels: {
rotation: -45
}
},
series: [
{
type: 'variwide',
showInLegend: false,
data: [
{ name: '0.00 - 10.10', y: 13, z: 1260000 },
{ name: '10.10 - 34.14', y: 10, z: 3000000 },
{ name: '34.14 - 54.56', y: 9, z: 2550000 },
{ name: '54.56 - 71.43', y: 15, z: 2110000 },
{ name: '71.43 - 102.09', y: 4.6, z: 3830000 },
{ name: '102.09 - 161.56', y: 1.8, z: 7430000 },
{ name: '161.56 - 217.26', y: 5.7, z: 6960000 },
{ name: '217.26 - 301.65', y: 0.7, z: 10550000 },
{ name: '301.65 - 382.82', y: 2.8, z: 10150000 },
{ name: '382.82 - 874.80', y: 0.2, z: 61500000 }
]
}
]
});
#container {
max-width: 800px;
min-width: 380px;
margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>
<div id="container"></div>
As you can see, the labels look pretty bad.
Two solutions, neither of which I can work out how to do:
Rename the points (I can do this) and move them to the right so that they're under the ticks
Better solution: make the x axis linear and have the labels appear in natural places like they would usually on a linear graph, similar to https://www.highcharts.com/demo/histogram . Changing the axis to linear seems to mess everything up on a variwide chart, though…
Any ideas?
Variwide series doesn't support non categorized x axis. It's reported as an issue on github: https://github.com/highcharts/highcharts/issues/7359
Workaround:
Variwide can be simulated by using column series.
Create a separate series for each point and link them together by putting linkedTo: ':previous' in each of them (except of the first one). Then set pointRange for every series. pointRange is series' property and cannot be assigned to individual points - that's why separate series has to be crated for each point.
series: [{
data: [
[5, 99]
],
pointRange: 2
}, {
linkedTo: ':previous',
data: [
[7.5, 72]
],
pointRange: 3
}, {
linkedTo: ':previous',
data: [
[14, 111]
],
pointRange: 10
}]
x position of the point indicates the middle of the column. So if the x = 5 and pointRange = 2 then the column will span from 4 to 6.
Unfortunately Highcharts doesn't handle extremes well while using multiple values of pointRange. Setting x axis minimum fixes it:
xAxis: {
min: 9, // 4 (axis' minimum) + 10 (max point range) / 2 = 9
},
These plotOptions are required to achieve proper widths of columns:
grouping: false,
groupPadding: 0,
pointPadding: 0,
Live demo: http://jsfiddle.net/BlackLabel/27gr3wh8/
API reference: https://api.highcharts.com/highcharts/
Related
I want to plot two axis (bar + scatter) on a plotly chart with javascript, but I can't get the zero baseline of the second y-axis to align with the first axis.
Here is the result of the current version:
The Zero-line of the right y-axis (the scatter line) is higher than the zero-line of the left y-axis. I would want to have them on the same height in the plot, basically overlapping.
I create the Plotly object like this:
const trace1 = { x: dates, y: y1, name: 'item', type: 'bar' };
const trace2 = { x: dates, y: y1_cumsum, name: 'Total', yaxis: 'y2', type: 'scatter' };
Plotly.newPlot(MYDIV, [trace1,trace2], {
margin: {t: 0},
barmode: 'group',
hovermode: 'x unified',
yaxis: {title: 'item', dtick: 1},
yaxis2: {
title: 'total',
overlaying: 'y',
side: 'right'
},
showlegend: true,
legend: {
x: 0.25,
xanchor: 'right',
y: 1
}
});
I tried to change position in the config, but this does only affect the x-position, not where the y-axis starts. I can't find any suitable attribute in the docs (https://plotly.com/javascript/reference/layout/yaxis/) that would achieve that.
How can I set the position of the second y-axis to be the same as the first one?
Thanks.
Assuming you don't have negative values in your data, you can set layout.yaxis.rangemode = 'tozero'for one or both of your axes.
const trace1 = {
x: [3, 4, 5],
y: [0, 15, 13],
mode: 'markers+lines',
type: 'scatter',
yaxis: 'y2'
};
const trace2 = {
x: [3, 4, 5],
y: [1, 0, 3],
type: 'bar'
};
Plotly.newPlot('myDiv', [trace1,trace2], {
margin: {t: 0},
barmode: 'group',
hovermode: 'x unified',
yaxis: {title: 'item', dtick: 1},
yaxis2: {
title: 'total',
overlaying: 'y',
side: 'right',
rangemode: 'tozero'
},
showlegend: true,
legend: {
x: 0.25,
xanchor: 'right',
y: 1
}
});
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
Need to create a motion High Chart, i have made a fiddle to explain what i have done yet.
But need to make work the motion play button which is not working, motion will work on clicking the button and it will change the boxes color depends on the random value, motion bar will be of time frame.
https://jsfiddle.net/4aqhB/981/
Motion and series calls :
motion: {
enabled: true,
axisLabel: 'year',
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
series: [0],
// The series which holds points to update
updateInterval: 1,
magnet: {
type: 'both', // thumb / point / both
round: 'floor', // ceil / floor / round
smoothThumb: true, // defaults to true
step: 0.01
}
},
series: [{
name: 'Heat Map',
borderWidth: 1,
data: [[0,0,10],[1,0,5],[2,0,3]],
}]
A heatmap point has structure like this:
{
x: Number
y: Number
value: Number
...
}
Additionally, for the motion plugin the point requires sequence property which is an array of heatmap points - it might be a partial object - if you want to update the point's value (color on heatmap) then the point in the sequence should be like this:
{ value: Number }
Example of the series:
series: [{
name: 'Heat Map',
borderWidth: 1,
data: [{
x: 0,
y: 0,
sequence: [{
value: 10
}, {
value: Math.random() * 10
}, {
value: Math.random() * 10
}]
}, {
x: 1,
y: 0,
sequence: [{
value: 5
}, {
value: Math.random() * 5
}, {
value: Math.random() * 5
}]
}, {
x: 2,
y: 0,
sequence: [{
value: 3
}, {
value: Math.random() * 3
}, {
value: Math.random() * 3
}]
}]
}]
example: https://jsfiddle.net/k4d8okt8/
Taking from inspiration from this question, I am trying to figure out how to swap the axes of a Line chart in Chart.js.
For instance, in Highcharts we have this example, although it's an area chart.
Is it possible to "swap" the X and Y axis on a line chart?
datasets: [
{
label: "data1a",
data: [1,2,3,4,5,1,2,3]
}
]
yAxes: [
{
type: "linear",
display: true,
position: "left",
}
]
Here's my fiddle modified from the above link. I'm basically trying to move it so the graph looks rotated 90 degrees. I tried changing the y position to 'top' but it still doesn't look correct.
The proposal by #dralth works fine with version 2.8.0, but for some reason showLines: true does not work anymore since version 2.9.0.
It is still possible showing the lines by using the showLine property for each dataset.
In case of #dralth's example it works as follows (tested with version 2.9.3):
new Chart(document.getElementById('myChart'), {
type: 'scatter',
data: {
datasets: [
{
label: 'My Dataset',
data: [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}],
showLine: true
},
],
},
options: {
scales: {
xAxes: [
{
type: 'linear',
position: 'bottom',
},
],
yAxes: [
{
type: 'linear',
},
],
}
}
})
I was able to accomplish this in Chart.js 2.8.0:
Change data to a list of objects with x and y. Since the intention is to swap x and y axis, put the "x data" in the y variable and vise verse.
eg. [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}]
Set the chart type to 'scatter'
Add showLines: true to the options
The outcome is a line chart where the line can be horizontal, vertical, or even double back on itself. The orientation of the line is defined by which values you put in x and which you put in y.
Here's an example configuration:
new Chart(document.getElementById('myChart'), {
type: 'scatter',
data: {
datasets: [
{
label: 'My Dataset',
data: [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}],
},
],
},
options: {
showLines: true,
scales: {
xAxes: [
{
type: 'linear',
position: 'bottom',
},
],
yAxes: [
{
type: 'linear',
},
],
}
}
})
If you're using an older version of Chart.js that doesn't have scatter plots, you can use this plugin: http://dima117.github.io/Chart.Scatter/
I have a basic plot.ly 3D scatter graph with various paths specified in three dimensions. After three days of reading documentation, I still haven't found a way to define the tick interval of my axes. It seems to be auto-generating them based on my data, which I don't want. In effect, I need my three axes to be in a 1:1:1 ratio, is this possible?
<style>html, body { height: 100%; }</style>
<div id="myDiv" style="width: 100%; height: 100%"></div>
<!-- Latest compiled and minified plotly.js JavaScript -->
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
var data = [
{
x: [-886, -719],
y: [-4785, -5192],
z: [527, 501],
type: 'scatter3d'
},
{
x: [-1782, -92],
y: [1740, -5172],
z: [18, 252],
type: 'scatter3d'
},
{
x: [3844, -450],
y: [35, -5185],
z: [20, 219],
type: 'scatter3d'
},
{
x: [2770, 761],
y: [2360, -5122],
z: [246, 96],
type: 'scatter3d'
},
{
x: [3800, 546],
y: [-3419, -5215],
z: [57, 311],
type: 'scatter3d'
},
{
x: [-340, 775],
y: [-3893, -5189],
z: [573, 135],
type: 'scatter3d'
},
{
x: [-3141, -41],
y: [3677, -5205],
z: [18, 383],
type: 'scatter3d'
},
{
x: [19, -546],
y: [261, -5181],
z: [74, 93],
type: 'scatter3d'
},
{
x: [3, 789],
y: [394, -5165],
z: [112, 421],
type: 'scatter3d'
}
];
var layout = {
// height: 700,
// width: 700,
xaxis: {
range: [-5000, 5000]
},
yaxis: {
range: [-5000, 5000]
}
};
Plotly.newPlot('myDiv', data, layout);
</script>
Code demonstration: https://rocket-league-replays.github.io/3d-hitmaps/
I am less familiar with the javascript plotly api, this answer was written with python in mind. Hopefully it also helps in your situation.
If I understand your question properly you want to set the tickmode for the axis, and depending on the mode you pick you also want to set either nticks; tick0 and dticks; or tickvals.
the following is taken from: https://plot.ly/python/reference/#layout-scene-xaxis-tickmode a difficult to effectively search, but very useful page. The javascript version of the page is: https://plot.ly/javascript/reference/#layout-scene-xaxis-tickmode
tickmode (enumerated: "auto" | "linear" | "array" )
Sets the tick mode for this axis. If "auto", the number of ticks is set via nticks. If "linear", the placement of the ticks is determined by a starting position tick0 and a tick step dtick ("linear" is the default value if tick0 and dtick are provided). If "array", the placement of the ticks is set via tickvals and the tick text is ticktext. ("array" is the default value if tickvals is provided).
Again this is for python, but in the scene option there is a way to set the range of the x, y, or z axis using the range(list) option in the xaxis (or yaxis or zaxis) below is an example code.
scene = dict(xaxis=dict(gridcolor='rgb(0, 0, 0)',
zerolinecolor='rgb(0, 0, 0)',
showbackground=False,
range = (minX,maxX)),
yaxis=dict(gridcolor='rgb(0, 0, 0)',
zerolinecolor='rgb(0, 0, 0)',
showbackground=False,
range = (minY, maxY)),
zaxis=dict(gridcolor='rgb(0, 0, 0)',
zerolinecolor='rgb(0, 0, 0)',
showbackground=False,
range = (minZ, maxZ)))
fig['layout'].update(scene)
here is the documentation: https://plot.ly/python/reference/#layout-xaxis-range and for java https://plot.ly/javascript/reference/#layout-xaxis-range
Yes, sure. That information is possible to be seen in Plotly's documentation on how to format axes for 3d charts.
Code wise, what you want is something like this
var layout = {
scene:{
aspectmode: "manual",
aspectratio: {
x: 1, y: 1, z: 1,
},
xaxis: {
nticks: 100,
range: [-5000, 5000],
},
yaxis: {
nticks: 100,
range: [-5000, 5000],
},
zaxis: {
nticks: 100,
range: [-5000, 5000],
}},
};
Is it possible to disable tooltips for only one series in a combination chart of canvasjs below?
data: [
{
type: "area",
color: "red", // change color here
fillOpacity: 1,
dataPoints: [
{ x: 0, y: 100 },
{ x: 100, y: 100 }
]
},
{
type: "area",
color: "yellow",
toolTipContent: " ",
dataPoints: [
{ x: 0, y: 10 },
{ x: 100, y: 100 }
]
}
]
Here is the link to my fiddle :
https://jsfiddle.net/Abhishek1191/s71djz9m/2
I have four separate series plotted inside the fiddle. 3 Area and 1 line. If anyone may let me know if I can disable tooltips for area series.
Thanks in advance
Instead of setting toolTipContent to empty string, set toolTipContent to null which will disable the toolTip for individual dataPoint / dataSeries. In your jsfiddle you are using v1.4.1 which does not support this feature. Please download the latest version. Here is the working code .
var chart = new CanvasJS.Chart("container",
{
data: [
{
toolTipContent: null,
type: "column",
dataPoints:[
{ x: 10, y: 20}
]
}
]
});
chart.render();