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.
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
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
With these basic options, this chart is feeling cramped — the 'U.S. Average' plotline label is overlapping the first bar.
Is there a way to add padding to the top and bottom of the plot area, thereby giving a little breathing room for the plotline & its label?
JSFiddle of the problem
Plotline code:
Highcharts.setOptions({
chart: {
style: {
fontFamily: "Oswald, sans-serif",
textTransform: "uppercase"
}
}
});
var chart = new Highcharts.Chart({
"credits": {
"enabled": false
},
"chart": {
"renderTo": "container",
"type": "bar"
},
"title": {
"text": "Percent of Adults Who Binge Drank"
},
"subtitle": {
"text": "2013 | Percent of Adults Who Binge Drank"
},
"xAxis": {
"categories": ["Boston", "Denver", "Miami", "New York", "Phoenix", "San Antonio", "San Jose", "Seattle", "Washington"],
"labels": {
"useHTML": true,
"style": {
"width": "100px",
"min-width": "100px",
"text-align": "right"
}
}
},
"yAxis": {
"title": {
"text": null
},
"plotLines": [{
"color": "#9b9b9b",
"dashStyle": "shortdot",
"value": 26,
"width": 2,
"label": {
"text": "U.S. Average",
"align": "left",
"x": 5,
"rotation": 0,
"zIndex": 1000,
"useHTML": true,
"style": {
"font-size": "10px",
"background-color": "#fff"
}
}
}]
},
"series": [{
"data": [35, 26, 18, 18, 15, 21, 55, 19, 22],
"color": "#e12922"
}],
"exporting": {
"enabled": true,
"buttons": {
"contextButton": {
"menuItems": "buttons"
}
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height:400px;width:600px;margin:1.5em 1em;"></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/