Develop Reference

limit x axis while keeping lines into offscreen

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/

Change color of marker on hover points - Highcharts

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

How to show data at middle instead of at the bottom while one of the data's value has big difference. highcharts.js

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>

How to put the Y-axis of a chart to the right-side of it

I created a chart in Billboard.js which looks like this:
var chart = bb.generate({
"data": {
"type": "line",
"x": "x",
"columns": columns
},
"point": {
"show": false
},
"legend": {
"show": false
},
"axis": {
"x": {
"localtime": false,
"type": "timeseries",
"tick": {
count: 7,
"format": "%b %d, %Y",
"rotate": 45,
"multiline": true
},
 "label": {
"text": label,
"position": "outer-center"
},
},
"y": {
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
},
"bindto": "#main-chart"
});
Now it looks like the classic style, X axis on the bottom and Y axis on the left. I want to move the Y axis on the right of the table.
I've tried many ways to do it but without success like these ones:
-changing its name from y to y2
-adding the same code but with y2:
"y": {
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
"y2": {
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
I addied show attribute inside the label like this:
"y": {
"label": {
"show": false,
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
"y2": {
"label": {
"show": true,
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
Any ideas?

Try
var chart = bb.generate({
"data": {
"columns": [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
"axes": {
"data1": "y2" // set additional y axis
}
},
"axis": {
"y": {
"show": false // hide default y axis
},
"y2": {
"show": true
}
},
"bindto": "#AdditionalYAxis"
});
I have tried it on their demo from github. There is an option axis where you can simply hide the axis. Hope this helps.
Working Example: https://jsfiddle.net/k3o1ws47/

I think, #Nouphal pointed exactly what to do.
The key point is set data.axes options to bound datas to y2 axis.
https://naver.github.io/billboard.js/release/latest/doc/Options.html#.data:axes
I made working demo with your code(except the data value), so replace it setting with your data and will work.
var chart = bb.generate({
"data": {
"type": "line",
"x": "x",
"columns": [
// replace with your data value
['x', '2017-10-01', '2017-10-02', '2017-10-03', '2017-10-04', '2017-10-05', '2017-10-06'],
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
"axes": {
"data1": "y2",
"data2": "y2"
}
},
"point": {
"show": false
},
"legend": {
"show": false
},
"axis": {
"x": {
"localtime": false,
"type": "timeseries",
"tick": {
count: 7,
"format": "%b %d, %Y",
"rotate": 45,
"multiline": true
},
 "label": {
"text": "label",
"position": "outer-center"
},
},
"y": {
"show": false
},
"y2": {
"show": true,
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
},
"bindto": "#main-chart"
});
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
</head>
<body>
<div id="main-chart"></div>
</body>
</html>

amcharts.js - make guide lines visible, if values are too different

I need something like in the picture attached.
Please follow this fiddle
As you can see, I've added two guide lines, but they are not visible, as its values are bigger than graph values.. Is there any way, I can make them visible? Maybe there is some way to zoom chart out or something.. See my code bellow or in jsfiddle.
Thanks,
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD HH:NN",
"dataProvider": [{
"date": "2012-01-01",
"value": 8
}, {
"date": "2012-01-02",
"value": 10
}, {
"date": "2012-01-03",
"value": 12
}, {
"date": "2012-01-04",
"value": 14
}, {
"date": "2012-01-05",
"value": 11
}, {
"date": "2012-01-06",
"value": 6
}, {
"date": "2012-01-07",
"value": 7
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"tickLength": 0
}],
"graphs": [{
"bullet": "none",
"valueField": "value"
}],
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"gridAlpha": 0.1,
},
"guides": [{
"value": 25,
"toValue": 25,
"lineColor": "#CC0000",
"fillAlpha": 1,
"fillColor": "#CC0000",
"label": "critical"
}, {
"value": 20,
"toValue": 20,
"lineColor": "#CCF000",
"fillAlpha": 1,
"fillColor": "#CCF000",
"label": "normal"
}]
});

The answer is a value axis setting includeGuidesInMinMax. Just set it to true and it will recalculate value axis scale to include all present guides:
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"tickLength": 0,
"includeGuidesInMinMax": true
}]
Here's your updated fiddle.