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/
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
I have the following chart:
AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"colorField": "color",
"series": [{
"type": "PieSeries",
"alignLabels": false,
"ticks": {
"disabled": true
},
"labels": {
"radius": "-40%",
"fill": "white"
}
}],
"dataProvider": [{
"title": "Yes",
"value": 3,
"color": "#6bbdb9"
},
{
"title": "No",
"value": 2,
"color": "#2f2f2f"
}
],
"titleField": "title",
"valueField": "value",
"labelRadius": 5,
"radius": "42%",
"innerRadius": "60%",
"labelText": "[[title]]",
"export": {
"enabled": true
}
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/responsive/responsive.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv"></div>
I have two items I want to resolve:
I want the "Yes" and "No" labels to sit inside rather the slices, rather than be outside. From the V4 docs, I have tried this approach:
"series": [ {
"type": "PieSeries",
"alignLabels": false,
"ticks": {
"disabled": true
},
"labels": {
"text": "{value.percent.formatNumber('#.0')}%",
"radius": "-40%",
"fill": "white"
}
}]
But this approach doesn't work for me in V3 (does nothing).
When you click a slice, it animates the slice outwards, I want, on click, for it to do nothing. Can't find anything on the docs about this?
Any ideas?
A lot of what you're looking for is in the aptly named Version 3 documentation; I'm not sure why you were poking around in the version 4 documentation.
That said, to move the labels inside, you need to set a negative labelRadius as demonstrated here:
AmCharts.makeChart("...", {
// ...
labelRadius: -35, //adjust as needed
// ...
});
To disable the pull out on click, set pullOutRadius to 0.
AmCharts.makeChart("...", {
// ...
pullOutRadius: 0,
// ...
});
Demo below:
AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"colorField": "color",
"dataProvider": [{
"title": "Yes",
"value": 3,
"color": "#6bbdb9"
},
{
"title": "No",
"value": 2,
"color": "#2f2f2f"
}
],
"titleField": "title",
"valueField": "value",
"labelRadius": -35,
"radius": "42%",
"innerRadius": "60%",
"labelText": "[[title]]",
"color": "#ffffff",
"pullOutRadius": 0,
"export": {
"enabled": true
}
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/responsive/responsive.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv"></div>
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
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.