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/
Related
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
I actually work with a tool named Jedox that allow me to use the Highchart.js library to make chart. So I try to make a simple chart with 2 series and 4 columns it's a grouped column chart(clustered bar chart). I saw on Highchart that is possible to change the color of a series with the array "colors" but when I use it it didn't work. Why ? I also try to use colorByPoint, it's working but it's not what I want because It color catogeries but in the categories there is different series and I want that each series have a precise color. How can I do that ?
Before you see the code here's some precision: I put "undefined" on color attribute because there is no way to delete those attribute so I put them into a default value. Normally when the value is set to "undefined" the color correspond to one of the color in the "colors" array.
One important thing you have to know before help me : I can't use JS, I can only use JSON that's all.
Here's my code:(it's just a json)
"chart": {
"type": "column",
"zoomType": "xy",
"borderRadius": 0,
"events": {},
"height": 300,
"width": 400,
"backgroundColor": "#FFFFFF",
"borderWidth": 1,
"borderColor": "#D8D8D8",
"plotBackgroundColor": null,
"plotBorderWidth": 0,
"plotBorderColor": "#000100",
"spacingTop": 20
},
"plotOptions": {
"series": {
"minPointLength": 1,
"dataLabels": {
"enabled": false,
"inside": false,
"rotation": 0,
"x": 0,
"y": 0,
"style": {
"fontFamily": "Arial",
"fontSize": 9,
"color": "#366092",
"fontWeight": "normal",
"fontStyle": "regular"
}
},
"cursor": null,
"point": {
"events": {}
}
}
},
"legend": {
"symbolRadius": 0,
"backgroundColor": null,
"borderWidth": 0,
"borderColor": "#000100",
"itemStyle": {
"fontFamily": "Arial",
"fontWeight": "normal",
"fontSize": "11px",
"color": "#445862",
"fontStyle": ""
},
"floating": false,
"align": "center",
"verticalAlign": "bottom",
"layout": "horizontal",
"reversed": false
},
"title": {
"text": null
},
"series": [
{
"name": "Expected",
"data": [
1,
5
],
"color": "undefined",
"id": 0,
"property": "dcColumnClustered",
"type": "column",
"yAxis": 0,
"zIndex": 2,
"borderWidth": 0,
"dataLabels": {
"enabled": false
}
},
{
"name": "Current",
"data": [
2,
3
],
"color": "undefined",
"id": 1,
"property": "dcColumnClustered",
"type": "column",
"yAxis": 0,
"zIndex": 2,
"borderWidth": 0,
"dataLabels": {
"enabled": false
}
}
],
"xAxis": [
{
"id": "x_0",
"axtype": "xAxis",
"labels": {
"enabled": true,
"style": {
"fontFamily": "Arial",
"fontWeight": "normal",
"fontSize": "11px",
"color": "#445862",
"fontStyle": ""
},
"autoRotation": false
},
"categories": [
"col1",
"col2"
],
"title": {
"style": {
"fontFamily": "Arial",
"fontWeight": "normal",
"fontSize": "11px",
"color": "#445862",
"fontStyle": ""
},
"text": ""
},
"tickInterval": null,
"minorTickInterval": null,
"gridLineWidth": 0,
"minorGridLineWidth": 0,
"reversed": false,
"reversedStacks": false
}
],
"yAxis": [
{
"id": "y_0",
"axtype": "yAxis",
"opposite": false,
"labels": {
"enabled": true,
"style": {
"fontFamily": "Arial",
"fontWeight": "normal",
"fontSize": "11px",
"color": "#445862",
"fontStyle": ""
},
"autoRotation": false
},
"gridLineWidth": 1,
"gridLineColor": "#D8D8D8",
"title": {
"text": "",
"style": {
"fontFamily": "Arial",
"fontWeight": "normal",
"fontSize": "11px",
"color": "#445862",
"fontStyle": ""
}
},
"tickInterval": null,
"minorTickInterval": null,
"reversed": false,
"reversedStacks": true
}
],
"tooltip": {
"enabled": true
},
"colors": [
"#FF0000",
"#0000FF"
]
Here's my Fiddle
Here's the goal I want to reach
The default color value is undefined, not a string "undefined". (If undefined value isn't allowed by Jedox, put null instead)
"series": [{
"color": undefined,
...
},
{
"color": undefined,
...
}
]
Live demo: https://jsfiddle.net/BlackLabel/zocj5a0b/
API Reference: https://api.highcharts.com/highcharts/series.column.color
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 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>
I'm currently experiencing an issue with Highcharts and would appreciate some help from anyone with experience customising the charts.
What I am trying to achieve is to have the x-axis labels starting and ending at 0% and 100% of the graphs width. Instead they seem to be periodically placed with spacing along the x-axis as you will see on the screenshot attached below. (Sorry about the low quality)
JSFiddle: http://jsfiddle.net/8uqyz1o0/
In the above screenshot, I have been trying to make the first label (Oct 13 as rendered by Highcharts in this example), start at the x-axis 0 location. However as you can see in the screenshot there is a significant amount of white space padding.
Help would be appreciated, as I believe I have tried everything in the Highcahrts API documentation (http://api.highcharts.com/highcharts).
JSFiddle: http://jsfiddle.net/8uqyz1o0/
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 800px"></div>
JS (jQuery dependency)
var ChartData = {
"chart": {
"type": "area",
"spacing": [0, 0, 0, 0],
"margin": [0, 0, 30, 0],
"width": null,
"height": null,
"backgroundColor": null
},
"title": {
"text": ""
},
"xAxis": {
"type": "datetime",
"lineWidth": 0,
"minPadding": 1,
"maxPadding": 0,
"tickWidth": 0,
"gridLineColor": "#333",
"labels": {
"style": {
"color": "#ccc",
"font": "14px Arial, Helvetica, sans-serif"
}
}
},
"yAxis": {
"title": {
"enabled": false
},
"showFirstLabel": true,
"showLastLabel": false,
"gridLineColor": "rgba(0,0,0,0.2)",
"gridZIndex": 20,
"labels": {
"enabled": true,
"x": 10,
"y": -10,
"align": "left",
"distance": 0,
"useHTML": true,
"zIndex": 0
}
},
"tooltip": {
"shared": true,
"useHTML": true,
"headerFormat": "",
"footerFormat": "",
"valueDecimals": 0,
"shadow": false,
"hideDelay": 200
},
"plotOptions": {
"area": {
"stacking": "normal",
"lineWidth": 3,
"marker": {
"enabled": true,
"symbol": "circle",
"lineColor": null,
"radius": 4,
"lineWidth": 2,
"fillColor": null,
"states": {
"hover": {
"enabled": true,
"radiusPlus": 2,
"lineWidthPlus": 0,
"lineColor": "#fff"
}
}
}
}
},
"legend": {
"enabled": false
},
"series": [{
"name": "Diversified Growth",
"portfolioType": 4,
"data": [
[1411516800000, 56000],
[1411948800000, 56000],
[1412553600000, 56000],
[1413158400000, 56000],
[1413763200000, 56000],
[1414368000000, 56000],
[1414972800000, 56000],
[1415577600000, 56000],
[1416182400000, 56000],
[1416787200000, 56000],
[1417392000000, 56000],
[1417996800000, 56000],
[1418601600000, 56000],
[1419206400000, 56000],
[1419379200000, 56000]
],
"color": "#60c896",
"fillColor": "#2bb673",
"marker": {
"fillColor": "#2bb673"
}
}, {
"name": "Local Growth",
"portfolioType": 1,
"data": [
[1411516800000, 40000],
[1411948800000, 40000],
[1412553600000, 40000],
[1413158400000, 40000],
[1413763200000, 40000],
[1414368000000, 40000],
[1414972800000, 40000],
[1415577600000, 40000],
[1416182400000, 40000],
[1416787200000, 40000],
[1417392000000, 40000],
[1417996800000, 40000],
[1418601600000, 40000],
[1419206400000, 40000],
[1419379200000, 40000]
],
"color": "#c3df91",
"fillColor": "#afd46c",
"marker": {
"fillColor": "#afd46c"
}
}]
};
$("#container").highcharts(ChartData);
You can use tickPositioner and calculate positions.
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
for (tick; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
return positions;
},
Example: http://jsfiddle.net/8uqyz1o0/5/