I'm a bit stumped. A little new to Highcharts. I have a watered down version of the chart I'm making with the issue I'm seeing.
I have three values on two y-axis. The second y-axis is linked to the first to ensure they share the same scale.
However, when the first y-axis gets a value much larger than the second, the chart doesn't auto re-size and the data point goes off the chart.
http://jsfiddle.net/L8x4a7x1/
In this example, if you look at this series:
{
name: "Vals 0",
type: 'column',
yAxis: 1,
data: [10, 200]
}
The value 200 is off the chart, as the scale seems to only care about the spline y-axis.
Any idea why this is the case and what can be done to fix it?
Thanks!
When an axis is linkedTo another it takes the extremes from the master. Since your master (first yAxis) is assigned to splines, you have 12 as max in master axis. So make the y-Axis with largest extremes the master.
series: [{
name: "Vals 0",
type: 'column',
yAxis: 0,
data: [10, 200]
}, {
name: "Vals 1",
type: 'spline',
yAxis: 1,
data: [4, 6]
}, {
name: "Vals 2",
type: 'spline',
yAxis: 1,
data: [3, 1]
}]
http://jsfiddle.net/6evnttmg/
Related
When the chart loads, instead of just having the points on the x-axis of 1, 2, 3, etc. it includes 0.2, 0.4, 0.6, etc in between each integer point. I can't figure out how to get rid of the in-between tick marks.
Chart:
new Highcharts.chart('<some id>', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'bar'
},
title: {
text: '<some label>'
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
xAxis: {
categories: categories,
// tickInterval: 1,
tickPositions: [0, 1, 2, 3, 4],
labels: {
step: 1
}
},
yAxis: {
min: 0,
max: 4,
title: {
text: '<some title>'
}
},
series: seriesData
})
It seems like it's just ignoring my tick mark settings. I've tried tickInterval w/out the positions specified, and nothing has even somewhat altered the x-axis from the default look. Even if I remove all the settings other than the category data, it looks the same. And yes, my interval is always [0,4] so there's no unbounded worries there.
Any ideas?
edit: It seems dependent on page size and the chart width... but how do I turn this setting off? As I increase and decrease the size of the page, it should never show decimals in between the integer tick marks.
I've reproduced your example and I believe you wanted to add your tickPositions property to the yAxis (in the bar series yAxis is horizontal by default, so you may have missed it).
yAxis: {
tickPositions: [0, 1, 2, 3, 4]
},
Live Demo: https://jsfiddle.net/BlackLabel/v1f2d5mp/
I am using Chart.js v2.5.0 to create a chart like this:
Note that sometimes the bar will go over the red dotted line. Sometimes the red dotted line will be at a different position (its normally at 25, but will be at other levels on some months).
My issue is that I want the red dotted lines to extend to the full width of the column. As you can see on the first column the red dotted line only goes halfway into the column. I have the same issue at the other end of the chart, the red dotted line only goes halfway into the column.
My current implementation here is to have a mixed chart, one is a bar chart and another is a line chart - with data like so:
data = {
labels: ['Jan 21st', 'Feb 21st', 'Mar 21st', 'Apr 21st']
datasets: [
{
type: 'bar',
label: 'A',
data: [10, 25, 18, 37],
},
{
type: 'line',
label: 'B',
data: [25, 25, 25, 25],
fill: false,
borderWidth: 1,
borderColor: '#f00',
borderDash: [5,4],
lineTension: 0,
steppedLine: true
}
]
}
Does Chart.js have an option or method for making the red dotted lines extend to the full column width?
I have had another idea, but I am not sure if this is possible: Can I use a bar graph for the red dotted line, and only show the top line of the bar graph?
Unfortunately, there isn't a way to "configure" the chart to achieve what you want. It all has to do with how the line chart scale drawing works. With that said, you can still achieve this behavior by tricking chart.js using some "dummy" data.
Basically, you create a "dummy" first and last label. Then add a corresponding "dummy" first and last value to your bar data array (this data will never be displayed). Then add a corresponding "dummy" first and last value to your line data array, but make sure you set the value the same as the next/prev value to end up with a straight line (otherwise your line will angle at the beginning and end). Here is what I mean.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['dummy1', 'Jan 21st', 'Feb 21st', 'Mar 21st', 'Apr 21st', 'dummy2'],
datasets: [
{
type: 'bar',
label: 'A',
// the 1st and last value are placeholders and never get displayed on the chart
data: [0, 10, 25, 18, 37, 0],
},
{
type: 'line',
label: 'B',
// the 1st and last value are placeholders and never get displayed on the chart
// to get a straight line, the 1st and last values must match the same value as
// the next/prev respectively
data: [25, 25, 25, 25, 25, 25],
fill: false,
borderWidth: 1,
borderColor: '#f00',
borderDash: [5,4],
lineTension: 0,
steppedLine: true
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
// exclude the 1st and last label placeholders by specifying the min/mix ticks
ticks: {
min: 'Jan 21st',
max: 'Apr 21st',
}
}],
}
}
});
Checkout this codepen example to see it in action.
I have a spline chart in Highcharts. It has data for 24 hours i.e 24 points. Now during those 24 hours, there are certain incidents that take place which i need to show as points on the spline chart. And there needs to be a tooltip for those points. How do i overlap these points on the spline graph including their tooltip? And these overlapped points need to be mapped to their corresponding time also on the x-axis. Any ideas if this can be done?
This is an example for what i want to do in a JSfiddle:-
http://jsfiddle.net/ttyc5dod/
$(function () {
$('#container').highcharts({
title: {
text: 'Test Graph',
x: -20 //center
},
xAxis: {
categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
},
yAxis: {
title: {
text: 'Availability(%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Data',
data: [7.0, 6.9, 9.5, 10, 11.2, 12.5, 15.2, 16.5, 13.3, 18.3, 13.9, 9.6, 12, 13, 12, 11.2, 9, 8, 5, 12, 14, 12, 12, 12.5, 10]
}]
});
});
For example, in the following example, between the time 23:00 and 24:00 hours, let's suppose an incident(issue) takes place which has to be shown on this graph. Is there any way to plot a point on this graph between 23:00 and 24:00 which shows the incident and also should have the tooltip telling the details about the incident.enter code here
Any help will be appreciated.
You should be able to add new series (I think the best will be scatter series) and add scatter points them between data points, if the incident occurs.
If you want to add your scatter points on the line of your first series, it should be easy to calculate the right y position for this points.
Here you can see very simple example of adding scatter point in your line, between two points:
function(chart) {
var value1 = chart.series[1].data[23].y,
value2 = chart.series[1].data[24].y;
chart.series[0].addPoint({
x: 23.5,
y: (value1 + value2) / 2,
details: 'this is an accident'
});
}
Here you can see an example how it can work:
http://jsfiddle.net/ttyc5dod/3/
I feel this must be easy but I'm just not seeing it. In the following, I want the 0 to be the very centre of the plot.
http://bit.ly/1LE6Cvr
I presumed this could be achieved with the "min" option but it does not work as expected. Instead, the zero point is created at half the charts radius.
Can someone please put me out of my misery? Thanks.
Your problem lies in the data your putting into the chart.
Because all of your plot points are 0 highcharts is adjusting the axis in order to make the data display in a readable manner.
If you adjust the data to a wider spread of numbers 0 becomes the center of the chart.
http://jsfiddle.net/3w8hq9tg/
$(function () {
$('#container').highcharts({
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
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'line',
name: 'Line',
data: [10, 0, 1, 5, 1, 6, 6, 2]
}]
});
});
I think I may have found a solution myself.
It would seem only way to have to plot point sitting neatly at 0 is to have a "max" value. See example.
But of course in most cases, you cannot just decide on an arbitrary max value if your series is being generated dynamically.
The trick is to determine from the API what the max value for the chart's yAxis dataset is, which if 0, you know there is no data to show, so you then set it dynamically.
See solution
I'm trying to make a polar type chart, which is similar to this:
http://star-board-sup.com/2015/wp-content/uploads/2014/09/11_6x30_astro_touring.png
Basically I have 4 values all ranging from 1-10 and would need them displayed in a fashion like above...so stretched out over the axis. Can you help me accomplish that using Highcharts? Looks similar to their polar type chart, but I can't figure out how to display it.
Thanks for all the help
Here is a simple try to rebuild your polar chart:
http://jsfiddle.net/c6unynr2/
This options should do most of your needs:
chart: {
polar: true
},
xAxis: {
categories: ['Tracking', 'Maneuverability', 'Stability', 'Speed'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
lineWidth: 0,
min: 0,
max: 10,
tickmarkPlacement: 'on'
},
series: [{
type: 'line',
name: 'Line',
data: [1, 2, 3, 4]
}]