I'm looking to syncronise the navigator and the range selector on my 3 charts.
I currently have the navigator at the bottom of the last chart and the range selector at the top of the first chart. However these still only control their related chart and not syncronised with the others.
Please see my fiddle: http://jsfiddle.net/gdf0swa9/
var options = {
"chart": {
"type": "line",
"polar": false,
"zoomType": "x",
"inverted": false
},
"rangeSelector": {
"enabled": true
},
"navigator": {
"enabled": false
},
"scrollbar": {
"enabled": false
},
"title": {
"text": "Peak",
"align": "left",
"floating": false
},
"subtitle": {
"text": " "
},
"series": [{
"name": "Peak",
"turboThreshold": 0,
"color": "#FF0000",
"threshold": 14,
"type": "line",
"dashStyle": "Solid",
"negativeColor": "#ffee58",
"colorByPoint": false,
"visible": true
}, {
"name": "Minimum",
"type": "line",
"color": "#f44336",
"dashStyle": "ShortDash",
"visible": false
}, {
"name": "Maximum",
"dashStyle": "LongDash",
"type": "line",
"color": "#f44336",
"visible": false
}, {
"name": "Threshold",
"type": "line",
"color": "#f50057",
"visible": false
}, {
"name": "Location Temperature",
"visible": false
}],
"data": {
"csv": "\"Movement\";\"Peak\";\"Minimum\";\"Maximum\";\"Threshold\";\"Location Temperature\"\n1;12.87;12;15;14;20\n2;16;12;15;14;23\n3;12.92;12;15;14;22\n4;13.14;12;15;14;25\n5;12.88;12;15;14;24\n6;13.03;12;15;14;23\n7;12.76;12;15;14;20\n8;16;12;15;14;22\n9;12.72;12;15;14;20\n10;13.2;12;15;14;24",
"googleSpreadsheetKey": false,
"googleSpreadsheetWorksheet": false
},
"pane": {
"background": []
},
"responsive": {
"rules": []
},
"yAxis": [{
"title": {
"text": "(V)"
}
}],
"xAxis": [{
"plotBands": [{}]
}],
"plotOptions": {
"series": {
"dataLabels": {
"enabled": false
}
}
},
"legend": {
"layout": "vertical",
"enabled": false,
"align": "center",
"floating": false
},
"annotations": [{}],
"tooltip": {
"shared": false
},
"credits": {
"text": " ",
"enabled": false
},
"accessibility": {
"describeSingleSeries": false
}
};
new Highcharts.StockChart("highcharts-67f948af-71a4-4556-ad25-ec142f0f406f", options);
}
}
})();
You can use afterSetExtremes event and set right xAxis extremes for other charts:
events: {
afterSetExtremes: function(e) {
for (var i = 0; i < 2; i++) {
Highcharts.charts[i].xAxis[0].setExtremes(e.min, e.max, true, false);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/gyt5pjc7/
API Reference: https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes
Related
We have upgraded chart.js from version 2 to 3 and now the following is not working. To make a single value, which should be displayed as a line, more readable, the value was simply displayed three times and only a section of the x axis was displayed. As a result, a straight line runs completely from left to right through the whole chart.
Here is an image of what it looked like in V2 vs. now in V3:
Img-Description: left chart with version 2, all lines and areas go from left to right; right chart with version 3, the line starts left but end in the middle and the areas go down after the middle datapoint
We are using the min/max attributes for the x scale. Any ideas?
This is my ChartConfiguration:
const ctx = document.getElementById("ctx").getContext("2d");
const configuration = {
"type": "line",
"data": {
"labels": ["", "2015", ""],
"datasets": [{
"data": [8, 8, 8],
"type": "line",
"label": "Umsatzrentabilität",
"borderColor": "#FF8F00",
"backgroundColor": "#FF8F00",
"fill": false,
"yAxisID": "yRight",
}, {
"data": [18330.47727032784, 18330.47727032784, 18330.47727032784],
"type": "bar",
"label": "Gesamtleistung in TEUR",
"backgroundColor": "rgba(0,152,100,0.8)",
"hoverBackgroundColor": "#009864",
"barPercentage": 0.5,
}, {
"data": [12, 12, 12],
"type": "line",
"label": "Branchenmitte von",
"fill": "+1",
"borderColor": "#dddddd",
"backgroundColor": "rgba(60, 60, 60, 0.06)",
"yAxisID": "yRight",
}, {
"data": [9, 9, 9],
"type": "line",
"label": "Branchenmitte bis",
"fill": "-1",
"borderColor": "#dddddd",
"backgroundColor": "rgba(60, 60, 60, 0.06)",
"yAxisID": "yRight",
}],
}, "options": {
"maintainAspectRatio": false,
"responsive": true,
"scales": {
"x": {
"axis": "x",
"grid": {
"borderColor": "#bbbbbb",
"color": "#f0f0f0",
"display": true,
"drawTicks": true,
"drawBorder": true,
"drawOnChartArea": true,
},
"min": "2015",
"max": "2015",
"type": "category",
"bounds": "data",
"id": "x",
"position": "bottom",
},
"y": {
"axis": "y",
"title": {
"align": "center",
"display": true,
"text": "Gesamtleistung in TEUR",
"color": "#666",
},
"suggestedMax": 21996.572724393405,
"suggestedMin": 0,
"grid": {
"borderColor": "#bbbbbb",
"display": true,
"drawBorder": true,
"drawTicks": true,
"drawOnChartArea": true,
},
"type": "linear",
"id": "y",
"position": "left",
},
"yRight": {
"axis": "y",
"type": "linear",
"display": true,
"position": "right",
"title": {
"align": "center",
"display": true,
"text": "Umsatzrentabilität (%)",
"color": "#666",
},
"suggestedMax": 14.4,
"suggestedMin": 0,
"grid": {
"borderColor": "#bbbbbb",
"color": "#f0f0f0",
"display": true,
"drawBorder": true,
"drawOnChartArea": false,
},
"id": "yRight",
},
},
},
};
new Chart(ctx, configuration);
#ctx {
min-height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="ctx" />
Here is a fiddle with the current version: https://jsfiddle.net/Sue10bach/7q3n6wvb/
When hovering over the chart, the " marker" is a round gray circle - I
want to change that to be a round circle with a green color.
Current chart http://jsfiddle.net/uqjvdtx2/3/
{
"title": {
"text": "Jun 15, 2021",
"style": {
"fontWeight": "bold"
}
},
"lang": {
"noData": "Your custom message"
},
"legend": {
"enabled": false
},
"xAxis": {
"categories": [],
"crosshair": {
"width": 1,
"zIndex": 2,
"color": "#ccc"
},
"title": {
"text": "test"
},
"visible": true,
"labels": {
"enabled": false
}
},
"chart": {
"height": 200
},
"yAxis": {
"title": false,
"crosshair": false
},
"credits": {
"enabled": false
},
"tooltip": {
"enabled": true,
"backgroundColor": "#fff",
"borderColor": "#ddd",
"borderRadius": 0,
"borderWidth": 0,
"shadow": false,
"shared": false,
"useHTML": true,
"zIndex": 99999
},
"plotOptions": {
"area": {
"marker": {
"enabled": true,
"symbol": "circle",
"fillColor": "green",
"radius": 2,
"states": {
"hover": {
"enabled": true,
"fillColor": "green"
}
}
}
}
},
"series": [
{
"name": "",
"data": [
72.61,
61.66,
62.48,
62.22,
55.29,
59.15,
63.91,
61.05,
60.12,
60.84,
60.96,
53.72,
56.31,
63.41,
62.25
],
"color": "#ccc",
"events": {}
}
]
}enter code here
When hovering over the chart, the " marker" is a round gray circle - I
want to change that to be a round circle with a green color.
You defined marker options for area series and you used line series. Correct the options structure and use individual ones per state.
plotOptions: {
line: {
marker: {
states: {
hover: {
fillColor: 'green'
},
normal: { ... }
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/er7fnkh0/
API Reference: https://api.highcharts.com/highcharts/plotOptions.line.marker.states.hover
The image above shows 3 lines are at the bottom of the chart. I'd like to have them showed in the middle like the image in the following.
I've tried setting max value in the yAxis object . But it's not quite ideal
I solved it by setting index in yAxis which should be the same in the series.yAxis in order.
by this way I could have the data grouped and being independent from other data which has huge difference of values.
here is sample
Highcharts.chart('container', {
"chart": {
"alignTicks": false,
"zoomType": false
},
"title": {
"text": "裝置即時資訊",
"floating": false,
"align": "left"
},
"xAxis": [{
"categories": ["INV01", "INV02", "INV03", "INV04", "INV05", "INV06", "INV07", "INV08", "INV09", "INV10", "INV11"],
"crosshair": true,
"index": 0,
"isX": true
}],
"tooltip": {
"shared": true
},
"legend": {
"layout": "horizontal",
"align": "right",
"x": 0,
"verticalAlign": "top",
"y": 0,
"floating": true,
"backgroundColor": "#FFFFFF"
},
"plotOptions": {
"line": {
"dataLabels": {
"enabled": true,
"format": "{point.y:,.2f}"
}
},
"column": {
"dataLabels": {
"enabled": true,
"format": "{point.y:,.2f}"
}
}
},
"yAxis": [{
"gridLineColor": "transparent",
"labels": {
"format": "{value} kWh",
"enabled": false
},
"title": {
"text": ""
},
"opposite": false,
"index": 0
}, {
"gridLineColor": "transparent",
"labels": {
"format": "{value} kWh",
"style": {},
"enabled": false
},
"title": {
"text": "",
"style": {}
},
"opposite": false,
"index": 1
}, {
"gridLineColor": "transparent",
"labels": {
"format": "{value} kW",
"style": {},
"enabled": false
},
"title": {
"text": "",
"style": {}
},
"opposite": false,
"index": 2
}],
"series": [{
"name": "累積發電量 (kWh)",
"data": [140212.2, 139949.6, 139821.4, 133556.8, 140040.4, 140997.8, 139240.4, 130340.6, 139336.7, 142920.5, 92437.5],
"tooltip": {
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.1f} kWh</b><br/>"
},
"type": "column",
"yAxis": 0
}, {
"name": "今日發電量 (kWh)",
"data": [44, 41, 42, 41, 46, 48, 47, 44, 43, 45, 29],
"tooltip": {
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.1f} kWh</b><br/>"
},
"type": "line",
"yAxis": 1
}, {
"name": "交流發電功率 (kW)",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"tooltip": {
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.1f} kW</b><br/>"
},
"type": "line",
"yAxis": 2
}, {
"name": "直流發電功率 (kW)",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"tooltip": {
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.1f} kW</b><br/>"
},
"type": "line",
"yAxis": 2
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
I am working on TreeMap where I am able to give borderColor on Hover of a particular datapoint. The same in this fiddle link --> http://jsfiddle.net/vgnshs/z8ncv2d5/.
But I am in need of requirement where I should get same kind of borderColor on click of a particular dataPoint (saying to user that the Point is selected) and borderColor should persist until I click on the same point again or somewhere outside plotArea. (I see this feature is available in Bubble chart, same needed in TreeMap). Also I should be able to select multiple points and all selected points should have the same borderColor.
Currently, TreeMap's select event fills the entire point with a different color which I don't want to. Only borderColor should be changed. How can I achieve this in TreeMap?
$(function () {
$('#container').highcharts({
"chart": {
"width": 640,
"height": 480
},
"colorAxis": {
"minColor": "#202020",
"maxColor": "#B0B0B0"
},
"title": {
"text": "Datalabel Sample"
},
"subtitle": {
"text": null
},
"credits": {
"enabled": false
},
"tooltip": {
"enabled": false
},
"plotOptions": {
"series": {
"states": {
"hover": {
"borderColor": "#0000FF",
"borderWidth": 1
}
}
}
},
"legend": {
"align": "right",
"layout": "vertical",
"verticalAlign": "middle",
"symbolHeight": 380,
"enabled": true
},
"series": [{
"type": "treemap",
"layoutAlgorithm": "squarified",
"allowDrillToNode": true,
"dataLabels": {
"enabled": false
},
"levels": [{
"level": 1,
"dataLabels": {
"enabled": true,
"color": "#FFFFFF",
"allowOverlap": false,
"align": "center",
"style": {
"fontWeight": "normal",
"fontSize": "24px",
"fontStyle": "normal",
"fontFamily": "'Open Sans', Arial, Helvetica, sans-serif",
"textShadow": null
},
"overflow": false
},
"borderWidth": 1
}],
"data": [ {
"id": "Apparel",
"name": "Apparel",
"value": 130.1,
"colorValue": 130.1,
"expanded": false,
"canexpand": false
}, {
"id": "Footwear",
"name": "Footwear",
"value": 90.7,
"colorValue": 90.7,
"expanded": false,
"canexpand": true
}, {
"id": "Accessories",
"name": "Accessories",
"value": 180.5,
"colorValue": 180.5,
"expanded": false,
"canexpand": true
}]
}]
});
});
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
You can set select state and configure color as false. Next step is configure datalabels, by setting useHTML as true and zIndex as 30.
Example: http://jsfiddle.net/z8ncv2d5/3/
I am adding highchart series dynamically . my setting are like below .
new Highcharts.Chart({
"name": "Ratingovertijrrrrrrrrr",
"CID": 59,
"type": 1,
"chart": {
"type": "area",
"zoomType": "xy",
"animation": true,
"renderTo": "CHART_01"
},
"colors": ["#fae570", "#e4b9b9", "#dc7474"],
"exporting": {
"enabled": true
},
"legend": {
"enabled": true,
"floating": false,
"layout": "horizontal",
"align": "center",
"verticalAlign": "bottom",
"backgroundColor": ""
},
"plotOptions": {
"series": {
"allowPointSelect": false,
"animation": true,
"showInLegend": true,
"dataLabels": {
"enabled": false
},
"stacking": "normal"
}
},
"subtitle": {
"text": "over tijd",
"style": {
"fontFamily": "Arial",
"fontSize": "14px",
"fontWeight": "normal",
"fontStyle": "normal",
"color": "#000000"
}
},
"title": {
"text": "Rating",
"style": {
"fontFamily": "Arial",
"fontSize": "18px",
"fontWeight": "normal",
"fontStyle": "normal",
"color": "#000000"
}
},
"tooltip": {
"enabled": true,
"shared": true,
"animation": true,
"crosshairs": [true, false],
"backgroundColor": "#79e538",
"formatter": function () {
return '<b>' + this.series.name + ':</b>' + this.y;
}
},
"xAxis": {
"title": {
"text": "Date",
"enabled": false,
"style": {
"fontFamily": "Arial",
"fontSize": "8px",
"fontWeight": "normal",
"fontStyle": "normal",
"color": ""
}
},
"type": "datetime",
"minRange": "60000",
"startOfWeek": "1",
"dateTimeLabelFormats": {
"millisecond": "%H:%M:%S.%L",
"second": "%H:%M:%S",
"minute": "%H:%M",
"hour": "%H:%M",
"day": "%e. %b",
"week": "%e. %b",
"month": "%b '%y",
"year": "%Y"
},
"categories": [""],
"labels": {
"enabled": true,
"align": "center",
"rotation": "0",
"x": "0",
"y": "15"
}
},
"yAxis": {
"title": {
"text": "Rating",
"enabled": false,
"style": {
"fontFamily": "Arial",
"fontSize": "8px",
"fontWeight": "normal",
"fontStyle": "normal",
"color": ""
}
},
"type": "linear",
"minRange": "",
"startOfWeek": "1",
"dateTimeLabelFormats": {
"millisecond": "%H:%M:%S.%L",
"second": "%H:%M:%S",
"minute": "%H:%M",
"hour": "%H:%M",
"day": "%e. %b",
"week": "%e. %b",
"month": "%b '%y",
"year": "%Y"
},
"categories": [""],
"labels": {
"enabled": true,
"align": "center",
"rotation": "",
"x": "",
"y": ""
}
},
"series": [{
"data": [0],
"name": "Loading...",
"loadingSeries": true
}],
credits: {
enabled: false
}
});
CHART_01 is container id . Initially loading will show ..after that ajax send to server to get series list .. and series add dynamically on success callback of ajax function .
The issue is browser stop working .
edit :
When I changed type into linear
"xAxis": {
"type": "linear",
"minRange": "0"
it working ... What is issue with "type": "datetime"?
PRoblem was with setting xAxis. In Highcharts it's not possible to set in the same time categorized axis and datetime. Also when setting minRange to some high values like 60 000 for categorized chart, Highcharts expect to display at least 60 000 categories, which is impossible to display 60 000 of labels for xAxis on a chart with width ~1000px.