The situation with my char is that currently the tick marks are positioned according to my "tickposition" paramenter, they displayed what I want but the problem is that for example the tick mark on '50' should be right on the middle of the chart, below the 50% bubble. So my chart looks off center.
I am not sure if the type of chart I am using is the correct one or how to approach this problem. I am super new on Highcharts.
Here is what I have:
http://jsfiddle.net/cjwh/hu1t8159/15/
$(function () {
$('#container').highcharts({
xAxis: {
tickPositions: [250, 500, 750, 1000],
min: 0,
max: 900,
labels: {
formatter: function() {
return this.value / 10;
}
},
},
yAxis: {
min: 0,
allowDecimals: false,
floor : 0,
ceiling: 200,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
text: null
}
},
chart: {
events: {
redraw: function () {
var chart = this,
point = chart.series[1].points[0];
if(chart.customLabel) {
chart.customLabel.attr({
x: point.plotX + chart.plotLeft - 25,
y: point.plotY + chart.plotTop - 65,
anchorX: point.plotX + chart.plotLeft,
anchorY: point.plotY + chart.plotTop
});
}
}
}
},
legend: {
enabled: false
},
series: [{
type: 'areaspline',
marker: {
enabled: false
},
data: [
[0, 1],
[210, 1],
[225, 2],
[372,108],
[378,112],
[387, 118],
[396, 122],
[403, 125],
[433, 130],
[450, 129],
[460, 126],
[472, 122],
[479, 118],
[486, 114],
[495,108],
[502,102],
[504,100],
[510, 94],
[514, 89],
[518, 85],
[522, 81],
[526, 76],
[529, 72],
[534, 67],
[541, 59],
[548, 51],
[556, 43],
[566, 34],
[583, 22],
[593, 17],
[612, 9],
[621, 6],
[626, 5],
[635, 3],
[642, 2],
[651, 1],
[870, 1],
[1000, 1]
],
zoneAxis: 'x',
zones: [{
value: 430,
color: '#18d1ba'
}, {
color: '#74e3d6'
}]
}, {
type: 'scatter',
data: [
[430, 130]
],
marker: {
radius: 8,
symbol: 'circle',
fillColor: '#fff',
lineColor: '#09f',
lineWidth: 3
}
}]
}, function (chart) { // on complete
var point = chart.series[1].points[0];
chart.customLabel = chart.renderer.label('50%', point.plotX + chart.plotLeft - 25, point.plotY + chart.plotTop - 65, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
.css({
color: '#09f',
fontSize: '18px'
})
.attr({
'stroke-width': 3,
stroke: '#09f',
fill: '#fff',
padding: 8,
r: 5,
zIndex: 6
})
.add();
});
});
This is a picture of the desired chart, please note the position of the 'x' positions or tickmarks.
http://claudiawong.ca/test/example.png
Would anyone happen to give me an example of what to change, ideally an example on the form of a jsfiddle would be really helpful.
Thanks!!!!
To expand on my comment:
1) You know, in your example, that 50% is 430. You can determine from that what 25, 75, and 100% are.
2) You can set the values of those percentages as your tickPositions array.
3) You will need to map the values to the % that you want to display in your labels
A very quick and dirty example:
var x100 = 860;
var x75 = (x100 * .75);
var x50 = (x100 * .5 );
var x25 = (x100 * .25);
var vals = {};
vals[x100] = '100';
vals[x75 ] = '75';
vals[x50 ] = '50';
vals[x25 ] = '25';
You can then use this object in your label formatter to display the correct value.
Example:http://jsfiddle.net/hu1t8159/18/
Related
I'm using react-chartjs-2 to draw a line chart but when I use the following code
const data = {
labels: [0, 11, 21, 31, 41, 50],
datasets: [
{
label: 'Radiant',
data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
x: e,
y: Math.round(50 + Math.random() * 30),
})),
fill: false,
borderColor: 'green',
backgroundColor: 'green',
},
{
label: 'Dire',
data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
x: e,
y: Math.round(50 + Math.random() * 30),
})),
fill: false,
borderColor: 'red',
backgroundColor: 'red',
},
],
};
my last point gets shown twice.
When I modify my labels to be 0, 10, 20, etc. it gets even crazier and I get the following result.
I fixed it by setting the type to be linear in xAxes:
scales: {
xAxes: [
{
type: 'linear',
},
],
},
I have this polar chart which is populated at every 2 sec with new data by a function.
What I want to achive:
Display line/area series, based on 120 values, for every 3º (in the img 'Layer1, 'Column for Layer 2' and 'Total' recive the 120 values while 'Line' has only 8 values for every 45º).
Every time a value passes a Limit ( I use 'threshold: 500,'), that point must be turn in to 'red' ( I set it with 'negativeColor')
My problem is:
When the value is passed, it is not making the line red, just the point.
It has this problem with the line ..... because if my values are under the down half of the circle it is not showing any line at all, just the points (It doesn't matter if it is a line, or arearange type series). Like this:
.
My code:
$(document).ready(
function(datt) {
chart = new Highcharts.chart('container', {
chart: {
polar: true,
zoomType: 'xy'
},
pane: {
startAngle: 0,
endAngle: 360
},
credits: {
enabled: false
},
title: {
text: 'Polar distribution of layers thickness '
},
tooltip: {
formatter: function() {
return this.series.name + ' WT: ' + JSON.stringify(this.y / 35.5).slice(0, 6);
}
},
xAxis: {
min: 0,
max: 360,
tickInterval: 45,
gridLineColor: 'white',
gridZIndex: 5,
labels: {
formatter: function() {
return this.value + " º";
}
}
},
yAxis: {
min: 0,
endOnTick: false,
visible: false,
maxPadding: 0,
labels: {
enabled: false
},
},
plotOptions: {
arearange: {
marker: {
enabled: false
}
}
},
series: [{
type: 'arearange',
name: 'Layer 1',
data: datt,
color: '#19dde8',
fillOpacity: 0.5,
lineWidth: 0.3,
zIndex: 2
},
{
type: 'arearange',
name: 'Column for Layer 2',
data: [
[0, 419, 419],
[45, 419, 419],
[90, 419, 419],
[135, 419, 419],
[180, 419, 419],
[225, 419, 419],
[270, 419, 419],
[315, 419, 419],
[360, 419, 419]
],
min: 400,
color: '#e8d618',
fillOpacity: 0.3,
lineWidth: 0.3,
threshold: 500,
negativeColor: 'red'
},
{
type: 'arearange',
name: 'Total',
data: [
[0, 451, 451],
[45, 451, 451],
[90, 451, 451],
[135, 451, 451],
[180, 451, 451],
[225, 451, 451],
[270, 451, 451],
[315, 451, 451],
[360, 451, 451]
],
lineWidth: 0.3,
color: '#c8c5f9',
fillOpacity: 0.5,
lineWidth: 0.3,
zIndex: 7,
},
{
type: 'line',
name: 'Line',
data: [
[0, 619],
[45, 639],
[90, 649],
[135, 659],
[180, 669],
[225, 639],
[270, 629],
[315, 699],
[360, 609]
],
lineWidth: 0.3,
color: 'orange',
threshold: 650,
negativeColor: 'red',
fillOpacity: 0.5,
lineWidth: 0.3,
zIndex: 7,
}
]
});
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.2.0/es-modules/parts-more/Polar.js"></script>
<div id='container'></div>
Unfortunately negativeColor property doesn't work properly in polar chart. As you can see it is reported and Highcharts core developer wrote: "As a short term solution, we must disable zones and negativeColor for polar charts, and specify that in the docs." https://github.com/highcharts/highcharts/issues/4936.
The solution which I can suggest for you is to use multicolor series Highcharts module http://blacklabel.github.io/multicolor_series/. Check this demo with a similar chart to yours: https://jsfiddle.net/Bastss/1c8mbu9e//
load() {
let chart = this;
chart.series.forEach((series) => {
if (series.userOptions.type != 'arearange') {
series.data.forEach((point) => {
if (point.y < 650) {
console.log(point)
point.update({
color: "red",
segmentColor: "red"
})
}
})
}
})
chart.reflow();
}
}
I am trying to create a custom data dial using high charts ( solid gauge ).
Please help me .
I am unable to generate an arrow end like tip dial of solid gauge. This is my current chart :
Updated Code : Please copy paste the code in the fiddle link provided below:
$(function() {
var gaugeOptions = {
chart: {
type: 'solidgauge',
height: 80,
width: 120,
backgroundColor: null
},
title: null,
pane: {
center: ['50%', '60%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
},
gauge: {
dial: {
baseWidth: 1,
topWidth: 1
},
pivot: {
radius: 3,
borderWidth: 1
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
tickPositions: [],
plotBands: [{ // mark the weekend
color: {
linearGradient: [0, 0, 300, 0],
stops: [
[0.1, '#55BF3B'], // green
[0.2, '#DDDF0D'], // yellow
[0.3, '#DF5353']
]
},
from: 0,
to: 5,
innerRadius: '60%',
outerRadius: '100%',
}],
},
series: [{
name: 'Ship Average',
type: 'gauge',
data: [2],
color: {
linearGradient: [0, 0, 300, 0],
stops: [
[0.1, '#55BF3B'], // green
[0.25, '#DDDF0D'], // yellow
[0.4, '#DF5353']
]
},
dataLabels: {
format: '<span style="font-size:10px;color:grey;">{y} delays</span></div>',
y: 30,
borderWidth: 0
},
tooltip: {
valueSuffix: ' days'
}
}]
}));
});
http://jsfiddle.net/n9gfeor2/29/
Expected result :
You can realize it by wrapping dial method (translate) and edit path.
point.shapeArgs = {
d: dialOptions.path || [
'M', -rearLength, -baseWidth / 2,
'L',
baseLength, -baseWidth / 2,
radius, -topWidth / 2,
radius - 10, -topWidth / 2 - 10,
'M',
radius, -topWidth / 2,
'L',
radius - 10, -topWidth / 2 + 10,
'M',
radius, -topWidth / 2,
baseLength, baseWidth / 2, -rearLength, baseWidth / 2,
'z'
],
Simple demo:
http://jsfiddle.net/L488w1as/
I have created a simple plotly line graph as follows:
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
xaxis:{
title:"x-axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
range:[0,20],
autorange: false
},
shapes: [
{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold1,
x1: 1,
y1: threshold1,
line:{
color: 'rgb(255, 0, 0)',
width: 2,
dash:'dot'
},
},
{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold2,
x1: 1,
y1: threshold2,
line:{
color: 'rgb(0, 255, 0)',
width: 2,
dash:'dot'
},
}
]
};
Plotly.newPlot(myDiv,[trace1],layout);
Now, I want to add a name or label to the threshold1 and threshold2 that I have created in 'shapes' under 'layout'. I searched the plotly JS documentation but did'nt get anything useful there. How can I do this. Any help would be appreciated.
You could create another trace with mode: 'text'. There is certainly more than one way of doing it but this one is simple and does not need complicated data replication.
var threshold1 = 12;
var threshold2 = 16;
var offset = 0.75;
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var trace2 = {
x: [Math.min.apply(Math, trace1.x) + offset,
Math.max.apply(Math, trace1.x) - offset],
y: [threshold1 - offset, threshold2 - offset],
mode: 'text',
text: ['lower threshold', 'upper threshold'],
showlegend: false
}
var layout = {
xaxis: {
title: "x-axis",
tickangle: 45,
rangemode: 'nonnegative',
autorange: true,
exponentformat: "none"
},
yaxis: {
title: "Time",
tickangle: 45,
rangemode: 'nonnegative',
range: [0, 20],
autorange: false
},
shapes: [{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold1,
x1: 1,
y1: threshold1,
line: {
color: 'rgb(255, 0, 0)',
width: 2,
dash: 'dot'
},
}, {
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold2,
x1: 1,
y1: threshold2,
line: {
color: 'rgb(0, 255, 0)',
width: 2,
dash: 'dot'
},
}]
};
Plotly.newPlot(myDiv, [trace1, trace2], layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>
You can use annotations:
layout.annotations = [
{
showarrow: false,
text: "Your text here",
align: "right",
x: 1,
xanchor: "right",
y: threshold1,
yanchor: "bottom"
},
{
showarrow: false,
text: "Your second text here",
align: "right",
x: 1,
xanchor: "right",
y: threshold2,
yanchor: "bottom"
}
],
Add just name property to your trace like
name = 'Xyz'
This Link might help you to fix it out.
I am creating a simple line graph using plotly JS. The code is something like below:
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
xaxis:{
title:"X-Axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
autorange:false
}
}
Plotly.newPlot(myDiv,[trace1],layout);
Now I want to create a horizontal line across the graph, parallel to x-axis which I want to span the entire graph. For this I added 'shapes' in layout something like below:
var layout = {
xaxis:{
title:"X_Axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
autorange:false
},
shapes: [
{
type: 'line',
x0: 2,
y0: 12.0,
x1: 3,
y1: 12.0,
line:{
color: 'rgb(255, 0, 0)',
width: 4,
dash:'dot'
}
}
]
};
Adding the 'shapes' parameter creates a horizontal value only between point 2 and 3 on the x-axes which I have specified .
My question is how to get the horizontal line span the entire graph without depending on x-axis value? Any help will be appreciated.
You could set xref to paper which tells Plotly not to rely on the x-axis coordinates but relative to the whole graph, i.e. 0 to 1.
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
shapes: [
{
type: 'line',
xref: 'paper',
x0: 0,
y0: 12.0,
x1: 1,
y1: 12.0,
line:{
color: 'rgb(255, 0, 0)',
width: 4,
dash:'dot'
}
}
]
}
Plotly.newPlot(myDiv,[trace1],layout);
<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>