See the attached image. So basically What I need is to draw rows with the chart. Like in image below, I want to show temperature on the chart as a line and snow/rain on the rows aligned with the axis. I have the temperature, rain and snow data in my series array.
Sample Data (For rain and snow, 1 mean yes):
series: [{
type: 'line',
data: [1,2,3,4,5,6,7,5,4,3,9,7],
name: 'Temperature'
}, {
data: [0,1,0,0,0,0,1,0,1,0,0,0],
name: 'Rain'
},{
data: [0,1,0,0,0,0,1,0,0,0,0,0],
name: 'Snow'
}]
You can use Renderer to draw a table but the data will not be treated as series but they will be simple static numbers with lines. However, you can use a heatmap series to have a chart as in the image.
You need 4 y axis - 1 for line, 2 for labels and the last two for snow and rain. The rest is adjusting axis positions though height and top properties.
Highcharts.chart('container', {
chart: {
spacingBottom: 0,
marginBottom: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
visible: false
},
yAxis: [{
height: '60%',
title: {
text: null
}
}, {
height: '10%',
top: '60%',
gridLineWidth: 0,
offset: 0,
endOnTick: false,
startOnTick: false,
title: {
text: null
},
visible: false
}, {
height: '10%',
top: '70%',
gridLineWidth: 0,
offset: 0,
// min: 0, max: 0,
endOnTick: false,
startOnTick: false,
title: {
text: null
},
categories: ['Rain']
}, {
height: '10%',
top: '80%',
gridLineWidth: 0,
offset: 0,
endOnTick: false,
startOnTick: false,
title: {
text: null
},
categories: ['Snow']
}],
colorAxis: {
stops: [
[0, 'white'],
[1, 'red']
]
},
plotOptions: {
heatmap: {
borderColor: 'black',
borderWidth: 0.5
}
},
series: [{
data: [1, 2, 3, 4, 5, 6, 7, 5, 4, 3, 9, 7],
name: 'Temperature',
step: 'left'
}, {
yAxis: 1,
type: 'heatmap',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(v => [0, v, 'white']),
showInLegend: false,
enableMouseTracking: false,
keys: ['y', 'value', 'color'],
dataLabels: {
enabled: true
}
}, {
yAxis: 2,
type: 'heatmap',
data: [0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0].map(v => [0, v]),
name: 'Rain'
}, {
type: 'heatmap',
yAxis: 3,
data: [0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0].map(v => [0, v]),
name: 'Snow'
}]
});
example: http://jsfiddle.net/euLz99mk/
Related
I am attempting to create the following chart:
However I can't seem to get the plotbands to work in this way; right now, they fill the entire axis:
I am not sure if I should use annotations instead, but so far I haven't gotten it to work. What can I try next?
Highcharts.chart('container',{
credits: {
enabled: false
},
title: {
text: "hello world",
style: {
visibility: 'hidden'
}
},
chart: {
type: 'line',
width: 400,
},
legend: {
enabled: false
},
exporting: {
enabled: true,
allowHTML:true,
chartOptions: {
chart: {
marginLeft: 175,
marginRight: 175
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true
}
}
}
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
gridLineWidth: 2,
tickWidth: 2,
tickLength: 20,
plotBands: [{
color: 'rgba(231, 23, 60, 0.5)', // Color value
from: 5, // Start of the plot band
to: 6.2 // End of the plot band
},
{
color: 'rgba(53, 101, 237, 0.5)', // Color value
from: 1, // Start of the plot band
to: 3 // End of the plot band
}
],
title: {
align: 'high',
offset: -40,
text: 'mmol/L',
style: {
fontWeight: "bold",
fontSize: 15
},
rotation: 0,
y: -20
},
min: 0,
max: 7,
labels: {
x: -10,
y: -3,
formatter: function () {
if (this.value != 0) {
if (this.value < 8) {
return this.value;
}
}
},
style: {
fontWeight: "400",
lineHight: "20",
padding: "0",
fontSize: "13"
}
}
},
annotations: [{
shapes: [{
point: '0',
type: 'circle',
r: 10
}, {
point: '3',
type: 'rect',
width: 20,
height: 20,
x: -10,
y: -25
}, {
fill: 'none',
stroke: 'red',
strokeWidth: 3,
type: 'path',
points: ['0', '1', {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}],
markerEnd: 'arrow'
}],
labels: [{
point: {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}
}]
}],
xAxis: {
gridLineColor: 'transparent',
accessibility: {
rangeDescription: 'Range: 2010 to 2020'
},
categories: [2018, 2019]
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true,
format: '<div style="max-width: 10ch; text-align: center;">{y}<br/>mmol/L</div>'
}
}
},
series: [{
name: '',
color: "black",
data: [5.4, 3],
showInLegend: false,
dataLabels: {
enabled: true,
useHTML: true,
}
}],
});
<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/annotations.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>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
This kind of plotBand shape is not possible from the API level, but you can simulate it in several ways. Example configurations:
SVG Renderer:
chart: {
events: {
render() {
const chart = this;
if (chart.rects) {
chart.rects = chart.rects.destroy();
}
chart.rects = chart.renderer.g('rects').attr({
zIndex: 1
}).add();
let x = chart.xAxis[0].toPixels(1),
y = chart.yAxis[0].toPixels(4),
width = chart.xAxis[0].toPixels(2) - chart.xAxis[0].toPixels(1),
height = chart.yAxis[0].toPixels(2) - chart.yAxis[0].toPixels(4);
chart.rect = chart.renderer.rect(x, y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
chart.rect = chart.renderer.rect(chart.xAxis[0].toPixels(3), y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/wst607ub/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Annotations:
annotations: [{
draggable: false,
shapes: [{
points: [{
x: 1,
y: 2,
xAxis: 0, // xAxis reference used, use xAxis value
yAxis: 0 // yAxis reference used, use xAxis value
}, {
x: 2,
y: 2,
xAxis: 0,
yAxis: 0
}, {
x: 2,
y: 4,
xAxis: 0,
yAxis: 0
}, {
x: 1,
y: 4,
xAxis: 0,
yAxis: 0
}],
type: 'path'
}]
}]
Demo:
https://jsfiddle.net/BlackLabel/uvxzp6o7/
API Reference:
https://api.highcharts.com/highcharts/annotations
Polygon series:
series: [{
name: 'Polygons',
type: 'polygon',
color: 'grey',
showInLegend: false,
enableMouseTracking: false,
states: {
inactive: {
opacity: 1,
},
},
data: [
[1, 2],
[2, 2],
[2, 4],
[1, 4],
null, // allows multiple polygons
[3, 2],
[4, 2],
[4, 4],
[3, 4],
]
}]
Demo:
https://jsfiddle.net/BlackLabel/4n7ep3k2/
API Reference:
https://api.highcharts.com/highcharts/series.polygon
Take note that annotations and polygon series require the module to be included.
I have an Echarts (v4.8.0) cartesian2d heatmap and I'd like to use a different continuous visualmap range [min,max] for each row (which I could filter by the second parameter value 'y' of each data). Is there a way to do it? I can only think in using different series, one for each row, but I don't know how to join them into a single chart.
Here is my option configs:
{
tooltip: {
position: 'left',
},
grid: {
left: '7%',
right: '3%',
},
animation: false,
xAxis: {
type: 'category',
data: ['04-10-2020', '05-10-2020'],
splitArea: {
show: false
},
position: 'top'
},
yAxis: {
type: 'category',
data: ['A', 'B'],
splitLine: {
show: true,
lineStyle: {
width: 2
}
}
},
visualMap: {
type: 'continuous',
show: false,
min: [0, 0],
max: [12, 15], //here I tried to have multiples ranged, but It crashes
inRange: {
color: ['#ffffff', '#990000']
},
dimension: '2',
},
series: {
name: "test",
type: 'heatmap',
data: [[0, 0, 2], [0, 1, 5], [1, 0, 9], [1, 1, 12]],
label: {
show: false
},
coordinateSystem: 'cartesian2d',
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
Thank you very much in advanced
The visual map it is component that can be used a several times just like axes, tooltip and so on. Have you tried to make clone visual map with other params?
var option = {
tooltip: {
position: 'left',
},
grid: {
left: '7%',
right: '3%',
},
animation: false,
xAxis: {
type: 'category',
data: ['04-10-2020', '05-10-2020'],
splitArea: {
show: false
},
position: 'top'
},
yAxis: {
type: 'category',
data: ['A', 'B'],
splitLine: {
show: true,
lineStyle: {
width: 2
}
}
},
visualMap: [{
type: 'continuous',
show: false,
min: 0,
max: 7,
inRange: {
color: ['#ffffff', '#990000']
},
dimension: '2',
}, {
type: 'continuous',
show: false,
min: 7,
max: 15,
inRange: {
color: ['#AC33FF', '#FF7C00']
},
dimension: '2',
}
],
series: {
name: "test",
type: 'heatmap',
data: [
[0, 0, 2],
[0, 1, 5],
[1, 0, 9],
[1, 1, 12]
],
label: {
show: false
},
coordinateSystem: 'cartesian2d',
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
}
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
Thanks to the answer of Sergey Federov I managed to do it by using multiple heatmap series with their corresponding visualmaps, using seriesIndex to link them. Here is an example where each row has 3 items with the same values, the first row (from bottom to top) has a visualMap range of [0, 15], while the second [5, 15]. The data is splitted into two series according to their second cartesian coordinate. For more rows, just split the data into more series and add their corresponding visualMaps.
var option = {
tooltip: {
position: 'left',
},
animation: false,
xAxis: {
type: 'category',
data: ['04-10-2020', '05-10-2020', '06-10-2020'],
splitArea: {
show: false
},
position: 'top'
},
yAxis: {
type: 'category',
data: ['A', 'B'],
splitLine: {
show: true,
lineStyle: {
width: 2
}
}
},
visualMap: [{
type: 'continuous',
show: false,
min: 0,
max: 15,
seriesIndex : 0,
inRange: {
color: ['#ffffff', '#990000']
},
dimension: '2',
}, {
type: 'continuous',
show: false,
min: 5,
max: 15,
seriesIndex: 1,
inRange: {
color: ['#ffffff', '#990000']
},
dimension: '2',
}
],
series: [{
name: "test1",
type: 'heatmap',
data: [
[0, 0, 5],
[1, 0, 10],
[2, 0, 15]
],
label: {
show: false
},
coordinateSystem: 'cartesian2d',
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
name: "test2",
type: 'heatmap',
data: [
[0, 1, 5],
[1, 1, 10],
[2, 1, 15]
],
label: {
show: false
},
coordinateSystem: 'cartesian2d',
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I want to display a small polar chart on my web site.
But there is an anoying behaviour. the container (circle) of the chart do not fit with the chart, it grow step by step. If a value is just too big, the chart will be lost in a huge empty circle.
Please, have a look on this jsfiddle to understand the problem :
http://jsfiddle.net/7zmT9/
Is it possible to force the frame to fit the chart? or to reduce the step value?
Here is my code :
$(function () {
$('#container').highcharts({
chart: {
polar: true,
height: 252,
width: 262
},
pane:{
size: '100%',
},
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: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 20], // replace 20 by 18 to see the a more fitted chart
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
});
Universal solution is to set maxPadding: 0 and sometimes endOnTick: false. See demo: http://jsfiddle.net/7zmT9/4/
yAxis: {
min: 0,
maxPadding: 0
},
You can indeed set the step, but I am not 100% sure if this is what you are looking for.
On your yAxis you can set the tickInterval
yAxis: {
min: 0,
tickInterval: 2 //change this value to suit your needs
},
I have updated your Fiddle. Is that what you are after?
I am trying to customize highcharts
1) I need to change the height of the plotlines
2) Show the marker value inside the marker image itself at a specific place(Inside the white circles at the top)
This is what I have achieved so far
Highcharts.setOptions({
global: {
useUTC: false
}
});
/*function updateData(x,y)
{
var series = chart.series[0];
series.addPoint([x, y], true, true);
}*/
var chart;
$(function () {
var color = '#AA34FF';
$('#container').highcharts({
chart: {
events: {
load: function(event) {
_bindCustomEvents();
}
},
backgroundColor: 'transparent'
},
series: [
{
color:
{
linearGradient:
{
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops:
[
/*[0, '#a83e3e'],
[0.21, '#d34e47'],
[0.40, '#edbb5a'],
[0.57, '#e2e57a'],
[0.76, '#8dcc63'],
[1, '#7ab237']*/
[0, '#7ab237'],
[0.21, '#8dcc63'],
[0.40, '#e2e57a'],
[0.57, '#edbb5a'],
[0.76, '#d34e47'],
[1, '#a83e3e']
]
},
lineWidth: 4,
marker: {
enabled: false,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
},
type: 'spline',
data: [1, 2, 5, 3, 6, 7, 4],
backgroundColor: 'transparent',
plotShadow : false
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc08.deviantart.net/fs71/f/2014/016/b/9/top_marker_by_skyrbe-d72ewk0.png)'
},
data: [8,8,8,8,8,8,8],
type:'scatter'
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc03.deviantart.net/fs71/f/2014/016/f/a/bottom_marker_by_skyrbe-d72ew7w.png)'
},
data: [-1,-1,-1,-1,-1,-1,-1],
type:'scatter'
}
],
xAxis: {
categories: [
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat'
],
title: {
enabled: true,
text: null,
},
labels: {
style: {
fontFamily: 'gestaregular',
fontSize: '16px',
color:'#fff'
}
},
plotLines: [
{ // mark the weekend
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 0,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 1,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 2,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 3,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 4,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 5,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 6,
dashStyle: 'dash',
zIndex:10
}],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
},
yAxis: {
labels: {
enabled: false
},
title: {
enabled: true,
text: null,
}
},
legend: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
});
});
function _bindCustomEvents()
{
var chart = $('#container').highcharts();
chart.setTitle({ text: ''});
$('.highcharts-axis').hide();
$('.highcharts-grid').hide();
$('.highcharts-axis').find('path').hide();
}
FIDDLE LINK
This is how I want it to look like : Instead of '2' in the top circles , it should be the corresponding value from the center spline [1, 2, 5, 3, 6, 7, 4]
1) The plotLines are infinite. The extend as far as the plot area is. So, to limit this, how about you change your yAxis max:
yAxis: {
max: 8,
labels: {
enabled: false
},
title: {
enabled: true,
text: null
}
},
Or, you could create a column series on the points you want and give them a certain value for the height you want. Making the columns thin to mimic your plotLines will help like so:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
data: [8, 8, 8, 8, 8, 8, 8]
},
...
2) Which values in the circles (I am guessing)? The "Series 1: XX"? Or the whole tooltip?
EDIT:
For question 2 you can do this with a formatter function on the dataLabel for the scatter series (your circles). Here is the function:
var customFormatPoint = function (pointX, seriesIndex) {
var theChart = $('#container').highcharts();
var yValue = null;
var points = theChart.series[seriesIndex].options.data[pointX];
return points;
};
You call this from:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
return customFormatPoint(this.point.x, 1);
}
},
data: [7.70, 7.70, 7.70, 7.70, 7.70, 7.70, 7.70]
}, {...
Key element here is that you have this.point.x which is that scatter point's xAxis location. You then need to send in which index the series is that contains the y value you want to show in the dataLabel.
I have also removed the plotLines and created a series that just contains the bars with width of 1 and no border. I had to mess around to get the end of the bar (its max value) to coincide with the scatter circle diameter.
Please see this jsFiddle.
I have been trying to get rid of the gap on the left and nothing works. This issues only happens when I add a reverse yAxis on the right. Below is the code I am using:
$(function () {
var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$('#container').highcharts({
chart: {
type: 'areaspline',
zoomType: 'xy',
},
title: {
text: 'Stats',
},
subtitle: {
text: 'YTD 2013 - 2014',
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
},
yAxis: [{ //--- Primary yAxis
min: 0,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
title: {
text: 'Mds',
style: {
color: '#8dc63f',
}
},
labels: {
style: {
color: '#8dc63f',
fontWeight: 'bold'
}
}
}, { //--- Secondary yAxis
labels: {
formatter: function () {
var mil = '$';
return mil + Highcharts.numberFormat(this.value, 0);
},
style: {
color: '#3fb4ed',
fontWeight: 'bold'
}
},
title: {
text: 'Revenue',
style: {
color: '#3fb4ed',
}
},
opposite: true
}],
series: [{
type: 'areaspline',
color: '#005a84',
fillOpacity: 0.2,
yAxis: 0,
zIndex: 3,
name: 'Goals',
data: [5, 5, 5, 5, 6, 8, 8, 8, 10, 10, 10, 10],
}, {
type: 'areaspline',
color: '#8dc63f',
fillOpacity: 0.2,
yAxis: 0,
zIndex: 4,
name: 'This Year',
data: [21, 14, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0],
}, {
type: 'areaspline',
color: '#d9531e',
fillOpacity: 0.2,
yAxis: 0,
zIndex: 3,
visible: false,
name: 'Last Year',
data: [20, 2, 2, 7, 8, 5, 7, 3, 2, 2, 5, 5],
}, {
type: 'column',
color: '#3fb4ed',
fillOpacity: 0.2,
yAxis: 1,
zIndex: 1,
visible: false,
name: 'Revenue',
data: [1, 1, 1, 1, 1, 1, 1, 1, 3, 4, 4, 2]
}]
});
});
I have tried every possible solutions out there. Went through API docs and searched every forum. Any help would be much appriciated.
You can set for xAxis:
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
min: 0.5, // remove padding
max: categories.length - 1.5, // remove padding
startOnTick: false, // allow to start not from tick
endOnTick: false // allow to end not at tick
},
Example: http://jsfiddle.net/p2EYM/24/ - turn on Revenue - you will see that first and last column will be cut off.
The reason it is doing this is because, even though the series is hidden on load, you have a column series that needs the width to display. If you just show series "Revenue" you can see it is using that empty space that was there before. You could also play with tickPixelInterval - but for that you need to not use a categorized xAxis.
See this example.
I also set showEmpty to false for both yAxis elements.
If you change the last of series from
type: 'column',
to
type: 'areaspline',
there will be no gaps on left and right side. Do you need type column?
Solution for your problem is answered here Highcharts Remove Space across the x-Axis by user Dusty. You have to setup for x-axis:
min: 0.5,
max: 10.5,
Note: if you turn your column type series to visible: true half of the first and the last column will be cut-off.