I'm trying to create a chart using highcharts that includes both a column series and a scatter series with a custom point marker. The series will contain slightly different sets of data, but will overlap for the most part and will always have the same x-axis values.
I've set it up, but the problem is that it's not lining up perfectly. Some of the scatter series' points are shifted one or two pixels to the left of the corresponding bar.
Any ideas about how to fix this?
{
chart: {
animation: false
},
xAxis: {
tickInterval: 1
},
series: [{
type: "column",
borderWidth: 0,
pointWidth: 20,
name: "col"
},
{
type: "scatter",
states: { hover: { enabled: false } },
marker: { symbol: 'url(symbol.png)' }
}]
}
And here's a screenshot of what's happening:
Indeed it looks like a bug, also with standard markers, so I've decided to report it to our developers https://github.com/highslide-software/highcharts.com/issues/1843
Related
The Problem:
I am using polar area chart. For slices in this chart, each value after the largest value should appear one level smaller. The level is as follows: for example, if the value after a 38 slice is 6, it should look like 37. Or I should be able to set it to the level I want. My question is all about sizing the slices on the polar area.
What I get:
What I want:
Sorry for my bad drawing. You can think what i want is like:
scaling very small slices close to large slice.
Methods I tried:
I tried changing the scale and ticks parameters from the link chartjs axes settings but without success.
I put the index data after sorting the array as data into the dataset. It worked as I wanted, but this time the values appeared as index values.
Charts.js polar area scales I tried this also but not worked.
A solution can be reached from the two methods I tried, but I could not.
Code example here:
function SetWorkflowChart(labels, datas, labelColors) {
//label colors
// workflow stats chart
const workflowdata = {
labels: labels,
datasets: [{
normalized: true,
data: datas, // example data: [38, 5,3]
backgroundColor: labelColors,
borderColor: "rgba(0, 0, 0, 0.0)"
}]
};
const workflowconfig = {
type: 'polarArea',
data: workflowdata,
options: {
scales: {
r: {
grid: {
display: false
},
ticks: {
display: false //try2 i tried to set ticks for scale
},
suggestedMin: 5, //try1
suggestedMax: 20,//try1
}
},
plugins: {
legend: {
display: false,
position: "right"
},
},
responsive: false
}
};
workflowChart = new Chart(
document.getElementById('WorkFlowStatsChart'),
workflowconfig
);
}
I'll be pleased if you pay attention.
I want to disable or hide marked x-axis on the following image:
But I still need to be able to show a plot line.
I tried to play around with "xAxis" Highcharts property and I am able to hide marked x-axis, but then I can not add a plot line. It seems to me this axis is somehow connected with the plot.
Thanks a lot for help.
The plotLines are connected to an axis, but you can separately disable the grid and the labels:
xAxis: [{
...,
grid: {
enabled: false
},
plotLines: [{
color: 'red',
value: today + day * 7,
width: 5
}],
labels: {
enabled: false
},
tickLength: 0
}, {
visible: false
}]
Live demo: https://jsfiddle.net/BlackLabel/c2xLruvp/
API Reference: https://api.highcharts.com/gantt/xAxis.visible
I've set markers in HighCharts to false for line charts, but I would this means that if the series a single point or if there is a discontinuous series like: [2.45, 7.89, null, 3.45] the 3.45 point would not show up at all on the chart. Is there a way to fix this?
line: {
marker: {
enabled: false
}
}
The 3.45 point does appear on the chart - if you hover over where it supposed to be you can see it highlighted. Issue is there is no line connecting to it from your 7.89 because connectNulls is false by default. To see the points connected turn this to true. You can also enable a marker per point not just per series:
series: [{
data: [{
y: 2.45
}, {
y: 7.89
}, {
y: null
}, {
y: 3.45,
marker: {
enabled: true
}
}]
Sample fiddle.
There are several examples with the Speedometer in Highcharts.
Is there a way, to show an additional dataLabel only, without dial in the gauge?
It could show a trip recorder, mileage counter or day counter.
I tried additional series and dataLabels, but could not get it running.
http://jsfiddle.net/uqa0t3xw
series: [{
name: 'mileage counter',
data: [],
dataLabels: {
x: 0, y: 20,
format: '{y:.0f} km',
}
}]
If you want to have an additional data label by adding another series and hiding the dial you can do so by setting the color of the dial to "transparent" (JSFiddle):
series: [
// Our "hidden" series
{
name: 'mileage counter',
data: [0],
dataLabels: {
x: 0, y: 50,
format: '{y:.0f} km',
},
dial: {
backgroundColor: 'transparent'
}
},
// ... Other series
]
Also note how the y value has to be big enough to not overlap with the other data labels. If it overlaps it will be hidden, since gauge has allowOverlap: false by default. Alternatively you could set that to true, but overlapping might not be pretty.
It should be noted that this can also be solved by creating your own div and placing it in the correct spot or perhaps copying the data label from the first series and moving it slightly.
I have a situation where I need to predict a trend in a time series, and I have to display confidence intervals. Is there a way to plot two sets of y-values in Highcharts as linked, and shade the area between the two? Something like this:
http://www.psychosomaticmedicine.org/content/74/4/377/F2.large.jpg
I have five time series: the prediction, two time series that bound the narrower confidence interval, and two more time series that bound the wider confidence interval.
The new Beta has that feature:
see jsFiddle
You can read more about the upcoming features in this post.
Highcharts does not natively support range charts (as of version 2.2.5), but there is a workaround. You can stack two area series on top of each other, with the foremost series having a background color matching that of the chart background.
And here is example javascript (that results in this chart):
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area'
},
title: {
text: 'Range chart emulation'
},
xAxis: {
},
yAxis: {
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 0,
stacking: 'normal'
}
},
series: [{
// this series defines the height of the range
name: 'Range',
data: [1,2,3,5,7,8,9,6,4,7,5,3,4,7,6,5,6,7,5,4,2]
}, {
// this series defines the bottom values
name: 'Dummy',
data: [0,1,2,3,3.5,7,8.5,5,2.5,5.5,3,2,3,5.5,4,3,4,5.5,4,3.5,1.5],
enableMouseTracking: false,
showInLegend: false,
fillColor: 'rgba(255, 255, 255, 0)'
}]
});
});