Highcharts.chart('container',{
chart: {
//renderTo: document.getElementById("container"),
type: 'column'
},
accessibility: {
description:'access description'
},
title: {
text: 'this is the graph'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
showInLegend: true
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},
{
name: 'japan',
data: [29.9, 73.5, 106.4, 45.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/high-contrast-light.js"></script>
<div id="container" tabindex="0" style="padding: 10px 1px 1px 1px; height: 240px; width: 500px;"></div>
I have a column chart with two series. The narrator creates issue in reading the data in such scenario whereas with one series, it's working. Any insights on this?
Demo project: jsfiddle.net/pfsbyxwz/3
Related
I have a chart in which I combine a stacked column chart with a stacked line chart. I would like to have stackLabels for the column chart only, and suppress the stackLabels for the stacked line chart.
It currently looks like this:
How can I achieve stack labels ONLY on the column chart?
Also see https://jsfiddle.net/o1bqwu7r/4/ or :
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
stackLabels: {
enabled: true
}
},
plotOptions: {
series: {
stacking: 'normal'
},
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
type: 'column'
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
type: 'column'
}, {
data: [2.9, 7.5, 16.4, 12.2, 14.0, 17.0, 13.6, 14.5, 21.4, 19.1, 9.6, 5.4],
type: 'line'
}, {
data: [14.0, 17.0, 13.6, 14.5, 21.4, 19.1, 9.6, 5.4, 2.9, 7.5, 10.4, 12.2],
type: 'line'
},]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
You can add a separate yAxis for the line series:
yAxis: [{
stackLabels: {
enabled: true
}
}, {
linkedTo: 0,
visible: false
}],
series: [{
data: [...],
type: 'column'
}, {
data: [...],
type: 'column'
}, {
yAxis: 1,
data: [...],
type: 'line'
}, {
yAxis: 1,
data: [...],
type: 'line'
}]
Live demo: https://jsfiddle.net/BlackLabel/1ojnakzw/1/
API Reference: https://api.highcharts.com/highcharts/yAxis
I am. trying to hide a portion of a series. I am using zone to do that, but somehow the visbile: false property doesn't work inside a zone. Is there any better way of doing that?
E.g., I am trying to hide the dotted part in the below exmpale:
https://jsfiddle.net/abdfahim/7849x56y/9/
Define the custom class for the zones and hide all the lines and points.
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
zoneAxis: 'x',
zones: [{
value: 3,
dashStyle: 'solid',
className: 'zone-0'
}, {
value: 5,
className: 'zone-1'
}, {
dashStyle: 'solid',
className: 'zone-2'
}]
}]
});
.highcharts-graph.zone-1 {
display: none;
}
.highcharts-area.zone-1 {
display: none;
}
.highcharts-point.zone-1 {
display: none;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
API Reference: https://api.highcharts.com/highstock/plotOptions.series.zones
I am making a Highstock chart using Highcharts, I need the title on the top left corner, just like Highcharts does.
In highcharts I can do it using yAxis.title.align: 'high', as you can see in this snippet
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'yAxis.title.offset is set to zero'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
lineWidth: 1,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
This doesn't work in a Highstock chart, using same options, as you can see on the following snippet:
Highcharts.stockChart('container', {
chart: {
type: 'column'
},
title: {
text: 'title offset is set to zero and align is high'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
lineWidth: 1,
tickWidth: 1,
top: "10%",
height: "90%",
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 400px"></div>
How can I aligne this text on the top-left side?
I have 2 series on my graph:
column (histogram)
line
My problem is that some values of my line series are hidden by the column series (the histogram cuts off line graph whenever there is a merge of the two graphs).
How could I be sure line graph is on the forefront?
Use the z-index attribute:
example:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
lineWidth: 5
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
type: 'column',
color: 'blue',
zIndex: 1
}, {
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
color: 'yellow',
zIndex: 2
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
How can we add content above every series like a html content .for ex - My Content. I am using line chart.
here is an example which i found in api.
jsFiddle: http://jsfiddle.net/ekec5nut/
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}, function (chart) { // on complete
chart.renderer.text('Series 1', 90, 150)
.attr({
rotation: 0
})
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});
});
but I do not want to give position like this : chart.renderer.text('Series 1', 90, 150) . I want is to have the content above each series while series are getting created.
How about simply using dataLabels for first point? Just like this:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [
{
dataLabels: {
enabled: true,
formatter: function() { return 'My Content'; }
},
y: 29.9
},
71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});