I've to change default bar color in a custom tfs widget, how can I do this?
I know there a "color" option but I can't find the correct syntax.
Thanks.
Here's my chart code:
chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
},
"chartType": "bar",
"series": [{
"data": [myBugs, myVuln, myCodeSm]
}],
"xAxis": {
"labelValues": ["Bugs", "Vulnerabilities", "Code smells"]
},
"specializedOptions": {
"showLabels": "true",
"size": 200
}
};
Try to add your custom colors like below:
chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
},
"colorCustomizationOptions": {
"customColors": ["#FF0000", "#00CC00", "#302772"]
},
"chartType": "bar",
"series": [{
"data": [myBugs, myVuln, myCodeSm]
}],
"xAxis": {
"labelValues": ["Bugs", "Vulnerabilities", "Code smells"]
},
"specializedOptions": {
"showLabels": "true",
"size": 200
}
};
In vss-web-extension-sdk/typings/charts.d.ts I found that customColors is a ColorEntry array. ColorEntry has two string properties: value, backgroundColor. With some trial and error I found out that value should be the label for which you want to set the color.
So I think this should work:
chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
},
"chartType": "bar",
"series": [{
"data": [myBugs, myVuln, myCodeSm]
}],
"xAxis": {
"labelValues": ["Bugs", "Vulnerabilities", "Code smells"]
},
"colorCustomizationOptions": {
"customColors": [
{backgroundColor: "#FF0000", value: "Bugs"},
{backgroundColor: "#00CC00", value: "Vulnerabilities"},
{backgroundColor: "#302772", value: "Code smells"}
]
},
"specializedOptions": {
"showLabels": "true",
"size": 200
}
};
Related
For this, I have been using the Vega Editor.
So I initially had the code for showing sin and cos absolutely fine, then when I tried to add tan, I understandably had some issues with scale, as the y values of tan were relatively huge when it approached the points where the function becomes undefined.
In order to tackle this, I added a range filter on the tan element, but it seems to be trying to join the points either side of when it is undefined. For some reason, this has also altered the sin line.
Here is the code I have so far:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Plots three functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {
"sequence": {
"start": 0,
"stop": 12.7,
"step": 0.1,
"as": "x"
}
},
"transform": [
{
"calculate": "sin(datum.x)",
"as": "sin(x)"
},
{
"calculate": "cos(datum.x)",
"as": "cos(x)"
},
{
"calculate": "tan(datum.x)",
"as": "tan(x)"
},
{
"filter": {
"field": "tan(x)",
"range": [-1, 1]
}
},
{
"fold": [
"sin(x)",
"cos(x)",
"tan(x)"
]
}
],
"mark": "line",
"encoding": {
"x": {
"type": "quantitative",
"field": "x"
},
"y": {
"field": "value",
"type": "quantitative"
},
"color": {
"field": "key",
"type": "nominal",
"title": null
}
}
}
How I can I get this data to not try and join up points but it instead let the tan line rise until it is out of the range? I also have very little idea what is happening with sin line, it is fine without the addition of the tan line.
Any help is greatly appreciated.
To avoid drawing a line between adjacent points, you'll need to split each segment into a separate group: the detail encoding is useful for this. Unfortunately, a grouping like this will apply to all the lines affected by the encoding, so to avoid breaks in the sin(x) and cos(x) curves, you'll need to split the tangent into a separate layer.
Here is how you might do this (open in editor):
{
"width": 300,
"height": 150,
"data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
"transform": [
{"calculate": "sin(datum.x)", "as": "sin(x)"},
{"calculate": "cos(datum.x)", "as": "cos(x)"},
{"calculate": "tan(datum.x)", "as": "tan(x)"},
{"calculate": "floor(datum.x / PI - 0.5)", "as": "phase"}
],
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {
"field": "value",
"type": "quantitative",
"scale": {"domain": [-3, 3]}
},
"color": {"field": "key", "type": "nominal", "title": null}
},
"layer": [
{"transform": [{"fold": ["sin(x)", "cos(x)"]}], "mark": "line"},
{
"transform": [{"fold": ["tan(x)"]}],
"mark": {"type": "line", "clip": true},
"encoding": {"detail": {"field": "phase", "type": "ordinal"}}
}
]
}
I am currently trying to display errorBars with a column chart which is working for the most part. The problem is the ordering of the error bars. They are back to font.
I have used the same data on a line chart which works fine for me.
This is my setup for my HighCharts options:
"chart": {
"type": "column",
"renderTo": {}
},
"title": {
"text": "Line chart",
"style": {
"color": "#000",
"fontFamily": "Arial, Helvetica, sans-serif",
"fontSize": "1.1rem",
"fontWeight": "bold"
}
},
"subtitle": {
"text": "Browser market share data 2019-2020",
"style": {
"color": "#000",
"fontFamily": "Arial, Helvetica, sans-serif",
"fontSize": "0.9rem",
"fontWeight": "regular"
}
},
"xAxis": [
{
"categories": [
"Chrome",
"Internet Explorer\n ",
"Firefox\n ",
"Edge\n ",
"Safari\n ",
"Sogou Explorer\n ",
"Opera\n ",
"QQ\n ",
"Other\n "
],
"title": {},
"accessibility": {
"description": "Line chart"
}
}
],
"tooltip": {
"shared": true
},
"plotOptions": {
"series": {
"showInLegend": true,
"events": {}
},
"column": {
"maxPointWidth": 75
}
},
"legend": {
"enabled": true,
"itemStyle": {
"font": "Arial, Helvetica, sans-serif",
"color": "#000"
},
"itemHoverStyle": {
"color": "gray"
}
},
"accessibility": {
"description": null
},
"series": [
{
"name": "2019",
"yAxis": 0,
"data": [
61.41,11.84,10.85,1,1,1.64,1.6,1,2.61
]
},
{
"name": "2020",
"yAxis": 0,
"data": [
50,40,20,15,14,12,6,4,3
]
},
{
"name": "Confidence interval",
"type": "errorbar",
"yAxis": 0,
"data": [
[55,65],
[5,15],
[7,25],
[1,2],
[1,2],
[1,4],
[1,3],
[1,2],
[2,4]
],
"tooltip": {
"pointFormat": "<strong>2019 error range</strong>: {point.low}-{point.high}<br/>"
}
},
{
"name": "Confidence interval",
"type": "errorbar",
"yAxis": 0,
"data": [
[45,55],
[30,50],
[15,30],
[10,20],
[10,20],
[6,18],
[4,8],
[1,6],
[1,6]
],
"tooltip": {
"pointFormat": "<strong>2020 error range</strong>: {point.low}-{point.high}<br/>"
}
}
],
"credits": {
"enabled": false
},
"exporting": {
"enabled": false
},
"colors": [
"#b2182b",
"#d6604d",
"#f4a582",
"#fddbc7",
"#d1e5f0",
"#92c5de",
"#4393c3",
"#2166ac"
]
}
And this is the result:
As you can see from the hover state that the labels are displaying correctly but on the chart the error bars don't match each column. They are in reverse and misaligned. Also they are slightly different shape from each other.
I have used this HighCharts guide for reference, mine doesn't look much different from the example https://www.highcharts.com/demo/error-bar/grid-light
The difference here is because the chart differently places the columns and error bars, especially it is visible with multiple columns.
After simplifying the demo, I was able to add one property called pointPlacement to the error series with the number to shift that series to a proper place.
API: https://api.highcharts.com/highcharts/series.errorbar.pointPlacement
Live demo: https://jsfiddle.net/BlackLabel/L3xwoe92/
I've created a stacked column chart using highchart it works fine. but when I toggle the visibility of a particular legend the column overlaps each other.
Highcharts.chart('container', {
"chart": {
"type": "column",
"zoomType": "x",
"panning": true,
"panKey": "shift",
"shadow": true,
"style": {
"fontFamily": "RotisSemiSans"
}
},
"title": {
"text": ""
},
"subtitle": {},
"xAxis": {
"type": "datetime"
},
"yAxis": [
{
"title": {
"text": "some value"
},
"opposite": false,
"type": "column"
}
],
"tooltip": {},
"plotOptions": {
"series": {
"stacking": "normal"
},
"line": {
"marker": {
"enabled": false
}
},
"area": {
"marker": {
"enabled": false
}
},
"pointRange": 1
},
"legend": {
"itemWidth": 150,
"maxHeight": 65
},
"credits": {
"enabled": false
},
"series": [
{
}],
});
Tried setting stack name but that too didn't work. setting the pointRange doesn't work either.
see it the JSFiddle
Your idea of using pointRange is a good way of dealing with it, you just misplaced it a bit. You have:
"plotOptions": {
"series": {
"stacking": "normal"
},
// ...
"pointRange": 1
},
Instead do (JSFiddle demonstration):
"plotOptions": {
"series": {
"stacking": "normal"
"pointRange": 5 * 60 * 1000
},
// ...
},
My example above uses 5 minutes, since that appears to be your interval. I am unsure of why it fails in the first place, but this should resolve the overlapping issue.
I am using hightchart plugin in Yii2 application.
Now When I want call some event like click on series point the plugin shows an error Uncaught TypeError: fn.call is not a function please help me.
My Js code for high chart is like that
Highcharts.setOptions([]);
new Highcharts.Chart({
"chart": {
"renderTo": "w0",
"type": "bar"
},
"credits": {
"enabled": false
},
"title": "Timeline content count monthly",
"xAxis": {
"categories": ["Aug 2016"],
"title": false
},
"yAxis": {
"min": 0,
"endOnTick": false,
"allowDecimals": false,
"title": {
"text": "Counts",
"align": "high"
},
"labels": {
"overflow": "justify"
}
},
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": true
}
},
"series": {
"cursor": "pointer",
"point": {
"events": {
"click": "function(){console.log(1); }"
}
}
}
},
"series": [{
"name": "1st Week",
"data": [1]
}, {
"name": "2nd Week",
"data": [4]
}, {
"name": "3rd Week",
"data": [7]
}, {
"name": "4th Week",
"data": [0]
}, {
"name": "5th Week",
"data": [0]
}]
});
Here the data should be generated using an active dataprovider. I think this will not effect. May be it is a Js issue.
libraries are also included correctly. chart is also plotting perfect. only the problem is that whenever I am going to click on point it shows an error.
Thanks.
You have this:
"click": "function(){console.log(1); }"
Should be like this
"click": function() {
console.log(1);
}
There's a zooming bug that we're struggling.
If you zoom in the left side of the chart, the right side of the chart is zoomed.
Simple example:
http://jsfiddle.net/andrut/TfG6c/
I do it like that:
{
"chart": {
"renderTo": "container",
"zoomType": "xy",
"type": "column"
},
"plotOptions": {
"series": {
"groupPadding": 0.04
}
},
"series": [{
"name": "col0",
"data": [{
"y": 93723,
"color": "#773676"
}]
}, {
"name": "col1",
"data": [{
"y": 68630,
"color": "#ff9900"
}]
}]
}
Is there any workaround to fix this? I haven't found anything interesting anywhere...
Thanks,
Karol
You need to set minRange paramter
yAxis:{
minRange: 1000
},
http://jsfiddle.net/TfG6c/1/