I create histogram with gaussian curve, but first data point of curve is skipped.
My example:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: [0,1,2,3,4,5,6,7,8,
9,10,11,12,13,14,15],
datasets: [{
borderWidth: 1,
backgroundColor: 'rgba(255, 99, 132,0.5)',
borderColor: 'rgb(255, 99, 132)',
data: [3,1,0,0,0,2,0
,2,0,2,0,0,0,0,0,0]
},{
type: 'line',
fill: false,
borderWidth: 1,
data: [
{
"x": 0.4175611241375584,
"y": 0
},
{
...other points
}
],
borderColor: 'rgb(54, 162, 235)',
radius: 2
}]
},
options: {
scales: {
yAxes: [{
categoryPercentage : 1,
barPercentage: 1
}],
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
stepSize: 1,
min: 0,
max: 4
}
}]
}
}
});
https://codepen.io/krna/pen/ejzqwg
When I only draw a Gaussian curve, all points are drawn correctly.
Inversion of histogram doesn't help.
I tried many strange tricks with data and chart axis configuration, but without success.
The problem is in 0 value on y-axis, it's probably interpreted as null instead of 0. You can make this work however, by making the labels and y values a string. Full answer You could find on https://github.com/chartjs/Chart.js/issues/5641.
Related
I have a simple HighStock chart with two series as shown in below image:
So functionality wise, HighChart decreases the width of the bar as soon as new series is added.
But I don't want to decrease the width of the bar, when there is data for only one series at specific point. (here date, 17. May)
Here is the Fiddle I have created. Try hiding one of the series and see width of the bar. The same width should be applied for the bar on "17. May" when both series are visible as there is data for only one series for that date. As shown below:
I have used below code:
Highcharts.stockChart('container', {
chart: {
alignTicks: false
},
legend: {
enabled: true
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Volume'
},
"series":[
{
"name":"Key Rate 319",
"type":"column",
"data":[{x: 1147651200000, y: 1}, {x: 1147737600000, y: 7}, {x: 1147824000000, y: 5}, {x: 1147910400000, y: 4}],
"marker":{"enabled":false},
"shadow":false,
"color":"blue"
},
{
"name":"Key Rate 321",
"type":"column",
"data":[{x: 1147651200000, y: 4}, {x: 1147737600000, y: 2}, {x: 1147824000000, y: null}, {x: 1147910400000, y: 1}],
"color":"green"
}]
});
How can I achieve this ?
Series has two properties for controlling the range and placement of points: pointRange & pointPlacement. They work for all series' points and unfortunately can't be applied to individual columns.
Workaround
Disable grouping and reset pointPadding & groupPadding:
plotOptions: {
series: {
grouping: false,
pointPadding: 0,
groupPadding: 0
}
},
Create a separate series for every point and apply appropriate pointRange & pointPadding to them. Then link them using linkedTo property to mimic the original series structure:
series: [{
name: 'First series',
color: '#bada55',
data: [
[0, 2]
],
pointRange: 0.4,
pointPlacement: -0.5
}, {
data: [
[1, 7]
],
linkedTo: ':previous',
color: '#bada55',
pointRange: 0.4,
pointPlacement: -0.5
}, {
data: [
[2, 5]
],
linkedTo: ':previous',
color: '#bada55',
//pointRange: 1, // by default
//pointPlacement: 0 // by default
}, {
data: [
[3, 4]
],
linkedTo: ':previous',
color: '#bada55',
pointRange: 0.4,
pointPlacement: -0.5
}, {
name: 'Second series',
data: [
[0, 1]
],
color: '#c0ffee',
pointRange: 0.4,
pointPlacement: 0.5
}, {
data: [
[1, 2]
],
linkedTo: ':previous',
color: '#c0ffee',
pointRange: 0.4,
pointPlacement: 0.5
}, {
data: [
[3, 2]
],
linkedTo: ':previous',
color: '#c0ffee',
pointRange: 0.4,
pointPlacement: 0.5
}]
Live demo: http://jsfiddle.net/BlackLabel/q7j4m8eb/
Disadvantage of this approach are that you must define color for each point (series) explicitly and the data structure look a bit complex.
All options mentioned above can be found in the API: https://api.highcharts.com/highcharts/
Observe the series one in the below example having a constant value and for that series points connecting lines are not plotted, but when we give a solid colour then the line will be plotted.
Highchart's line chart with constant series not plotting the line b/w points when we use line gradient colour, but if you change that to solid colour then line will be plotting.
highcharts.series[].data = [2, 2, 2, ...];
highcharts.color[0] = {
linearGradient: {...},
stop: {...}
};
Check this example:
https://jsfiddle.net/4vk7cdmz/
This is because of the attribute gradientUnits in linearGradient which the default value is objectBoundingBox.
Keyword objectBoundingBox should not be used when the geometry of the
applicable element has no width or no height, such as the case of a
horizontal or vertical line, even when the line has actual thickness
when viewed due to having a non-zero stroke width since stroke width
is ignored for bounding box calculations. When the geometry of the
applicable element has no width or height and objectBoundingBox is
specified, then the given effect (e.g., a gradient or a filter) will
be ignored.
W3C Recommendation
You need to use gradientUnits="userSpaceOnUse".
Highcharts.js has fixed this issue in version 2.2.
Instead of using linearGradient as an object
"linearGradient": {
"x1": 0,
"y1": 0,
"x2": 1,
"y2": 0
}
, using it as an array
"linearGradient": [x1, y1, x2, y2],
will set gradientUnits to userSpaceOnUse in highcharts.js
(This requires knowledge of the line width.)
Here's a demo:
var Chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'a constant series line is not plotting when using linear gradient colour.'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
colors: [{
"linearGradient": [0, 0, 500, 0],
"stops": [
[0, "rgb(35,190,250)"],
[1, "rgb(51,223,188)"]
]
}, {
"linearGradient": [0, 0, 500, 0],
"stops": [
[0, "rgb(250,79,168)"],
[1, "rgb(156,120,229)"]
]
}],
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [2, 2, 2, 2, 2, 2, 2]
},
{
name: 'Jane',
data: [1, 1, 1, 1, 1, 1, 2]
}
]
});
#container {
width: 100%;
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/css/highcharts.css" />
<div id="container"></div>
Is there is a way to round off the area points and make them less pointed when used in the polar chart?
I have tried the 'areaspline', but with polar chart it's not quite right, as you can see here:
http://jsfiddle.net/qwbu6r3t/2/
Highcharts.chart('container', {
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
}
},
series: [{
type: 'areaspline',
name: 'Area spline',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
EDIT
What I need
You can override highcharts Highcharts.seriesTypes.areaSpline.prototype.getPointSpline with same method but with changed smoothing parameter. (Default 1.5)
...
var smoothing = 3, // 1 means control points midway between points, 2 means 1/3 from the point, 3 is 1/4 etc
...
Live example:
http://jsfiddle.net/q3h6xwog/
just change area to areaspline would do what you want i think so
I am trying to create a 3D-scatter plot of some data with Highcharts. To make it easier to understand the 3D position of the data points, specially when using a still picture of the plot instead of the interactive draggable version, I would like to create projections of the data on each of the plot boundary planes.
It is not difficult to assign the corresponding position of these projections (example: http://jsfiddle.net/worg6jLz/1/), but I would like them to appear as real projections, not just as circles (or actually spheres) regardless of the perspective.
Is there a way to transform the plot markers according to their corresponding plane of projection, so that their shape is consistent with such projection regardless of the viewpoint?
Thanks.
$(function () {
// Give the points a 3D feel by adding a radial gradient
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.4,
cy: 0.3,
r: 0.5
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
]
};
});
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 450,
viewDistance: 5,
fitToPlot: false,
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
}
}
},
title: {
text: 'Draggable box'
},
subtitle: {
text: 'Click and drag the plot area to rotate in space'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10,
showFirstLabel: false
},
legend: {
enabled: false
},
series: [{
name: 'Data',
marker: {radius: 7,
symbol: 'circle',
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.5 },
stops: [[0, 'rgba(195,195,255,1)'],
[1, 'rgba(0,0,255,1)']]}
},
colorByPoint: false,
color: 'blue',
data: [[9,9,1],[8,8,2],[7,7,3],[6,6,4],[5,5,5],[4,4,6],[3,3,7],[2,2,8],[1,1,9]]
},
{
name: 'Proj.A',
marker: {radius: 7,
symbol: 'circle'},
colorByPoint: false,
color: 'rgba(155,155,155,1)',
data: [[0,9,1],[0,8,2],[0,7,3],[0,6,4],[0,5,5],[0,4,6],[0,3,7],[0,2,8],[0,1,9]]
},
{
name: 'Proj.B',
marker: {radius: 7,
symbol: 'circle'},
colorByPoint: false,
color: 'rgba(155,155,155,1)',
data: [[9,0,1],[8,0,2],[7,0,3],[6,0,4],[5,0,5],[4,0,6],[3,0,7],[2,0,8],[1,0,9]]
},
{
name: 'Proj.C',
marker: {radius: 7,
symbol: 'circle'},
colorByPoint: false,
color: 'rgba(155,155,155,1)',
data: [[9,9,10],[8,8,10],[7,7,10],[6,6,10],[5,5,10],[4,4,10],[3,3,10],[2,2,10],[1,1,10]]
}]
});
// Add mouse events for rotation
$(chart.container).bind('mousedown.hc touchstart.hc', function (eStart) {
eStart = chart.pointer.normalize(eStart);
var posX = eStart.pageX,
posY = eStart.pageY,
alpha = chart.options.chart.options3d.alpha,
beta = chart.options.chart.options3d.beta,
newAlpha,
newBeta,
sensitivity = 5; // lower is more sensitive
$(document).bind({
'mousemove.hc touchdrag.hc': function (e) {
// Run beta
newBeta = beta + (posX - e.pageX) / sensitivity;
chart.options.chart.options3d.beta = newBeta;
// Run alpha
newAlpha = alpha + (e.pageY - posY) / sensitivity;
chart.options.chart.options3d.alpha = newAlpha;
chart.redraw(false);
},
'mouseup touchend': function () {
$(document).unbind('.hc');
}
});
});
});
Bonus:
An additional interesting feature, though not the main purpose of this post, would be to draw lines linking the data points with their projections when the mouse pointer is placed over them.
I created a graph with Highcharts polar type. The boundaries of chart are overflowing. Can anyone please help me in fixing the graph.
Please find my problem on JSFiddle:
JSFiddle
Code:
$(function () {
$('#container').highcharts({
chart: {
polar: true,
showAxes: false
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 10,
lineColor: "#000000",
gridLineWidth: 5,
gridLineColor: "#000000"
},
yAxis: {
offset: 120,
tickmarkPlacement: 'on',
min: 0,
max: 4,
visible: false,
endOnTick: false
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
},
line: {
color: "#ff0000",
lineWidth: 10
}
},
series: [{
type: 'line',
name: 'Line2',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}]
});
});
This produces axis outside plot area. I would like to increase plot area so as to see the meeting point of extremist end points.
The reason the Plot is overflowing is because you have set a Maximum Value for the yAxis of 4 but in your data you have values that are greater than 4, like 8,7,6 and 5.
Just remove the max: 4 option from the yAxis Object and your Chart will display fine.