I have some highstock chart series with multiple yAxis. When I used resize enabled to true, a resizer comes and it resizes the chart as well. I want only one resizer at the bottom of 3 series which resizes the previous axis also. I think my top property in yAxis is preventing the charts from going above another axis. Please help.
I tried controlled axis previous property. which dint work
yAxis: [{
labels: {
align: 'right',
x: -3
},
height: '65%',
lineWidth: 2,
id:'cdStick'
}
, {
labels: {
align: 'right',
x: -3
},
top: '65%',
height: '35%',
lineWidth: 2,
offset: 0,
id:'vol'
resize: {
enabled: true,
controlledAxis: {
prev: ['cdStick']
}
}
}]
Related
I'm trying to create a chart that looks like the attached image.
I have come very close by using a bullet graph chart and I'm trying to get an arrow image dataLabel positioned on the series point but it sometimes goes to the right or left of the point. My intention is to have the series color transparent and have the datalabel visually replace the extending bar. not the target bar but the series bar itself. Buy my image not placed exactly on the point in the series OR is there another way to use an image or icon on top of the series point?
plotOptions: {
series: {
dataLabels: {
enabled:true,
useHTML:true,
x: -3,
y: 35,
format: '<img src="https://image.ibb.co/cqabM8/g3.png">'
},
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '300%'
}
}
}
Here is a JSFiddle used to try positioning the arrow...
Depending on how strict you are with how the data for this chart (in other words, where the arrow lies along the chart and how the colored zones are measured), there's a way to mimic this image using plot bands and line markers.
See my snippet below (or the fiddle at https://jsfiddle.net/brightmatrix/r78vz49a/).
I used plot bands to create the colored zones along an axis of 0 to 100 (assuming, for example, that 0% is fresh and 100% is totally rotten/inedible).
Then, there are two series: one with a marker that forms the arrowhead and a second that is simply a vertical line; both complete the arrow. So long as you keep the x-axis values for both the arrowhead and line consistent, the arrow would "move" along the line.
I hid the y-axis labels since they weren't relevant to your chart. If you wanted, you could also hide the x-axis labels and move your plot band labels below the chart.
Below is a screenshot of the final product. I hope this information is helpful for you in solving this challenge.
Highcharts.chart('container', {
title: { text: 'Freshness scale' },
xAxis: {
plotBands: [{
color: 'rgba(0,255,0,0.5)',
from: 0,
to: 33,
label: { text: 'Fresh', align: 'center', x: -10 }
},{
color: 'rgba(255,255,0,0.5)',
from: 33,
to: 67,
label: { text: 'Stale', align: 'center', x: -10
}
},{
color: 'rgba(255,0,0,0.5)',
from: 67,
to: 100,
label: { text: 'Moldy', align: 'center', x: -10
}
}],
min: 0,
max: 100
},
yAxis: {
min: 0,
max: 1,
tickInterval: 1,
title: { text: '' },
labels: { enabled: false }
},
legend: { enabled: false },
tooltip: { enabled: false },
series: [{
name: 'Freshness arrow',
data: [{x: 55, y: 0}],
lineWidth: 0,
color: 'black',
marker: { symbol: 'triangle-down', radius: 10, y: -10 }
},{
name: 'Freshness line',
data: [{x: 55, y: 0},{x: 55, y: 0.5},],
lineWidth: 4,
color: 'black'
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 150px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
How do I create the bar chart below? There are two versions. Thank you.
You can achieve the result with a stacked bar chart. Two series - one with the actual data, and the other for filling a bar and keeping labels. You should normalize the data your own (setting complementary values for the second series and min/max for axis).
series: [{
color: 'green',
data: [5, 3, 1],
dataLabels: {
align: 'right',
format: '{point.y} %'
}
}, {
color: 'grey',
data: [{
y: 3,
label: 'Footbal'
}, {
y: 5,
label: 'Soccer'
}, {
y: 7,
label: 'Baseball'
}],
dataLabels: {
align: 'left',
format: '{point.label}'
}
}]
example: http://jsfiddle.net/tPw24/553/
For the second chart, just swap the colors and data: http://jsfiddle.net/tPw24/555/
I have fiddled here with highcharts.js demo.
http://jsfiddle.net/Venkata/rq0h7o4o/
Data labels goes beyond x-axis. do i need to write formatters or any suggestions?
series: {
borderWidth: 0,
"dataLabels": {
enabled: true,
format: '{point.y:.1f}%',
rotation: -90,
align: 'right',
x: 4,
y: 15,
crop: false,
overflow: 'none'
}
}
I am generating my x-axis and y-axis data dynamically and displaying highcharts, but the chart becomes messy when the x-axis range is high with small intervals.
How do I make highcharts to make normal horizontally scrollable graph?
Here is what I am using right now:
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
//CODE FOR HIGHCHARTS JS
function makeChart() {
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 100
},
title: {
text: 'Banana',
x: -20 //center
},
subtitle: {
text: 'Source: banana.com',
x: -20
},
xAxis: {
categories: xlist
},
yAxis: {
title: {
text: 'No. of C'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: $("#repoSelector option:selected").text(),
data: ylist
}]
});
}
Two ways to achieve a scroll bar.
Option 1
You will need to use highstock.js and instead of rendering a stock chart, you have to render a highchart.
Then enable the scroll bar
scrollbar: {
enabled: true
}
Check the API for scroll bar and related operations here.
Here I have fiddled an example.
Option 2
Try setting min & max attributes to the x-axis.
xAxis: {
categories: [...],
min: 0,
max:9
}
Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories.
find the fiddled example here.
To enable scrollbar in x-axis, try this
xAxis: {
categories: xlist,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
},
Check the jfiddle here: https://jsfiddle.net/BhavyaAprajita/zja90wf2/1/
Also, make sure that you import the highstock library
src="https://code.highcharts.com/stock/highstock.js"
add this
const Highcharts = require('highcharts/highstock');
comment this if you have
// import Highcharts from 'highcharts';
change xAxis to like this
xAxis : {
categories: [],
min:0,
max:9,
scrollbar: {
enabled: true
}
}
Use
require('highcharts/highmaps') instead of require('highcharts') in imports<br>
#NgModule({<br>
...<br>
imports: [<br>
BrowserModule, <br>
ChartModule.forRoot( <br>
require('highcharts/highmaps')<br>
],<br>
})
I need to plot a radar chart using HighCharts; in particular, all of the series have a different scale. I am able to draw correctly the radar chart using multiple scales (one per y-axis), but I see multiple overlapping labels on the main y-axis, which is clearly wrong. Now, I want instead to plot the labels related to every y-axis on the corresponding y-axis. How can I do this ?
Here is a snippet that can be pasted in jsFiddle to verify that the labels indeed overlap.
$(function () {
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
polar: true,
type: 'line',
zoomType: 'xy'
},
title: {
text: 'Indicators Radar Chart',
x: -80
},
pane: {
size: '90%'
},
xAxis: {
categories: ['A', 'B', 'C', 'D'],
tickmarkPlacement: 'on',
lineWidth: 0,
min: 0
},
yAxis: [{
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}, {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}, {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}],
tooltip: {
shared: true,
valuePrefix: ''
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
series: [{
name: 'Austria',
yAxis: 0,
data: [0.130435, 35.043480, 29288.695312, 236960.296875],
pointPlacement: 'on'
}, {
name: 'Germany',
yAxis: 1,
data: [0.000000, 42.217392, 149103.906250, 589782.500000],
pointPlacement: 'on'
}, {
name: 'Italy',
yAxis: 2,
data: [2.304348, 44.826088, 132805.218750, 878785.937500],
pointPlacement: 'on'
}]
});
});
The output I am trying to obtain is such that for this particular chart, the labels related to the different scales appear along each axis: from the center point to A, from the center point to B, from the center point to C and from the center point to D. The problem is that right now all of the labels appear on the same axis, from the center point to A.
Thank you in advance.
Demo: http://www.highcharts.com/jsbin/eyugex/edit
You seem to assume that each of the axes extend from the center to different directions, but this is not the case. All Y axes extend from the center. The X axis starts on top of the chart and follows the perimeter clockwise around the perimeter and ends on top. The Y axis labels are drawn where the X axis starts, which is up.
In a chart like this it wouldn't make sense to add multiple Y axes because they are all drawn on top of each other and you can't visually distinguish one from another.