I need to connect each series dot on a specific base in a polar chart type. Basically this polar starts from -5 (as center of polar, but it is not visible), but I like to connect it from 0 until the series values.
It is what I have currently: http://jsfiddle.net/s9h6ry8r/
It is what I need:
You can use the scatter series with null points, which allows to print that kind of chart.
series: [{
type: 'scatter',
lineWidth: 2,
data: [
[0, 20], {
x: 0,
y: 0,
marker: {
enabled: false
}
},
null, [45, 30], {
x: 45,
y: 0,
marker: {
enabled: false
}
},
null
]
}]
Example:
- http://jsfiddle.net/s38w1b28/
Related
I want to plot marker of circle shape on a line chart to represent some values from x-axis. Screenshot is attached with details. Thanks!
check this image for what I am looking for
You can use dataLabels and marker properties:
series: [{
data: [1, 2, 3, 4, 5, 6, 7],
dataLabels: {
enabled: true,
y: 10
},
marker: {
radius: 10,
fillColor: '#FFF',
lineColor: '#7cb5ec',
lineWidth: 2
}
}]
Live demo: http://jsfiddle.net/BlackLabel/n7uhwzk8/
API Reference:
https://api.highcharts.com/highcharts/series.line.dataLabels.enabled
https://api.highcharts.com/highcharts/series.line.marker
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.
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 have this Highcharts column chart:
http://jsfiddle.net/ltherond/bmk71a8r/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
type: 'linear'
},
credits: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
shadow: false
}
},
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
});
});
I want the first bar to extend horizontally from 0 to 500 on the xaxis.
In other words, I want each bar to start at the current x value and end at the next x value.
How do I do that?
The option you are looking for is connectNulls for your series attribute
From my knowledge this options is only available for Area and Line Charts and no longer available for column or bar chart
I recommend you to change your Chart Type to area chart and use connectNulls option as mentioned in Documentation here
To meet your requirement in Column chart itself you need to tune your data you fed into High chart as follows in your series code segment
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
},{
x: 100,
y: 5,
color: "#00FF00"
},{
x: 200,
y: 5,
color: "#00FF00"
},{
x: 300,
y: 5,
color: "#00FF00"
},{
x: 400,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
This will solve your problem. see the working fiddle http://jsfiddle.net/bmk71a8r/3/
For this approach you need to write extra codes to format your Data
Good Day