I added grid for both, x and y axis. For 'x' it works well, but with 'y' something strange, columns are not in the middle of the lines.
My encoding object:
encoding: {
x: {
field: 'b',
type: 'quantitative',
axis: {
labels: true,
labelAngle: 0,
title: null,
labelFontSize: 10,
labelColor: '#94A3B8',
ticks: false,
domain: false,
gridColor: "#E2E8F0",
labelPadding: 10,
grid: true
},
scale: {
paddingInner: 0.2,
paddingOuter: 0.1,
},
sort: { field: 'c' }
},
y: {
field: 'a',
"type": "nominal",
axis: {
title: null,
labelFontSize: 10,
labelColor: '#94A3B8',
ticks: false,
domain: false,
gridColor: "#E2E8F0",
labelPadding: 16,
labelOffset: 3,
grid: true
}
},
In https://vega.github.io/vega-lite/examples/ there is no example with horizontal bar chart with 'x' and 'y' lines. Maybe this is a typical behavior
Thank you in advance!
You can control the position using bandPosition.
https://vega.github.io/vega-lite/docs/band.html
Related
I need to reduce amount of x-axis labels because now you can see what is going on:
Is it possible to adjust the step on the x-axis? I didn't find it in the documentation. In my case, it automatically counts by 200, I would like to control this.
This is my data:
data = [
{
name: 'Email Invite',
value: 6200,
tooltip: 'Total raised by Email Invite: $6200'
},
{
name: 'Text Invite',
value: 1000,
},
{
name: 'Extra Features',
value: 1800,
},
{
name: 'Snap Store',
value: 2400,
},
{
name: 'Social Media',
value: 4100,
},
]
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
description: 'bar-chart',
"config": {
"style": {
"cell": {
stroke: "#E2E8F0"
}
}
},
data: {
"values": this.data
},
"mark": {"type": "bar", "cornerRadiusTopLeft": 8, "cornerRadiusTopRight": 8},
encoding: {
x: {
field: 'b',
type: 'quantitative',
axis: {
labels: true,
labelAngle: 0,
labelFontSize: 10,
labelColor: '#94A3B8',
ticks: false,
domain: false,
gridColor: "#E2E8F0",
labelPadding: 10,
},
scale: {
paddingInner: 0.2,
paddingOuter: 0.1
},
sort: { field: 'c' }
},
y: {
field: 'a',
type: 'nominal',
axis: {
labelFontSize: 10,
labelColor: '#94A3B8',
ticks: false,
domain: false,
gridColor: "#E2E8F0",
labelPadding: 16,
labelOffset: 3,
}
},
color: {field: 'c', scale: {range: [`#000`]}, legend: null},
tooltip: {field: 'd', type: 'ordinal'}
},
width: "container",
height: 250
};
Thanks in advance!
This is controlled by tick attributes.
You can set a "tickCount", "tickMinStep" or even the values themselves via "values".
https://vega.github.io/vega-lite/docs/axis.html#ticks
I am trying to reduce the space between bars, and I am pretty sure it has to be within this piece of code. I removed the code that displays the legend and yAxes assuming I would not need to edit those parts.
barchart = new Chart(myChart, {
type:'bar',
data:{
labels: {{ data.x_vals | tojson }},
datasets:[{
label:'Liquid Level',
data:{{ data.y_vals }},
backgroundColor: gradient,
borderWidth:1, //Effects plotted line on chart
borderColor:'white',
hoverBorderWidth:1,
hoverBorderColor:'#000',
barPercentage: 1.0,
categoryPercentage: 1.0
}]
},
options:{
// legend is here
},
scales: {
// yAxes is here
xAxes: [{
display: true,
ticks: {
autoSkip: true,
padding: 4,
fontSize: 12
}
}]
},
You can set the category and bar percentages to 1:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'blue',
categoryPercentage: 1,
barPercentage: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
EDIT:
Make sure you have at least chart.js version 2.9 installed since any version below its not implemented yet
I have a plot with a separate layer for each of two categories of data. Each category has two subcategories. Only the first top-level category should have a legend. So I put legend: null on the second category and put a resolve at the top level to make the legends independent. But it's not working. Here's the plot, and below it is my code. I expect to see only a and b in the legend.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>legend test</title>
<link rel="stylesheet" href="styles/style.css" />
<script src="https://cdn.jsdelivr.net/npm/vega#5.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#4.2.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.2.2"></script>
</head>
<body>
<div id="plot-div"></div>
<script>
let spec = {
$schema: "https://vega.github.io/schema/vega-lite/v4.json",
description: "sigmatcher",
data: {
values: [
{legendGroup: true, x: 1, y: 1, cat: "a"},
{legendGroup: true, x: 2, y: 2, cat: "b"},
{legendGroup: true, x: 3, y: 4, cat: "a"},
{legendGroup: true, x: 4, y: 8, cat: "b"},
{legendGroup: false, x: 1, y: 11, cat: "c"},
{legendGroup: false, x: 2, y: 12, cat: "d"},
{legendGroup: false, x: 3, y: 14, cat: "c"},
{legendGroup: false, x: 4, y: 18, cat: "d"},
{legendGroup: false, x: 5, y: 26, cat: "c"},
]},
width: 400,
height: 400,
resolve: {
legend: {
color: "independent",
}
},
layer: [{
transform: [{
filter: {
field: "legendGroup",
equal: true
}}],
encoding: {
x: {
field: "x",
type: "quantitative"
},
y: {
field: "y",
type: "quantitative"
},
color: {
field: "cat",
type: "nominal"
}
},
mark: {
type: "point"
}
}, {
transform: [{
filter: {
field: "legendGroup",
equal: false
}}],
encoding: {
x: {
field: "x",
type: "quantitative"
},
y: {
field: "y",
type: "quantitative"
},
color: {
field: "cat",
type: "nominal",
legend: null
}
},
mark: {
type: "point"
}
}]};
vegaEmbed("#plot-div", spec);
</script>
</body>
</html>
Independent legends will still share a color scale unless you specify otherwise. You can change this by specifying resolve.scale.
In your case, instead of
"resolve": {"legend": {"color": "independent"}}
you should use
"resolve": {"scale": {"color": "independent"}}
Otherwise the scales will still be shared despite the legends being independent. If desired, you can then adjust the color schemes used by each layer to distinguish the points.
See it in action here:
The tooltip in my Highchart is behaving strangely. It is living its own life. It doesn't show the tooltip of the point on which I hover, but shows the tooltip of any point randomly.
Here is a JSFiddle example: http://jsfiddle.net/AeV7h/9/
$(function () {
var data=[[28,0],[24,3],[16,10]];
var param= { WodTag: "cur_spd", Name: "Current speed", Color: "#C6C6C6", LineStyle: "Solid", SeriesType: "line", LineWidth: 2, TickInterval: null, MinValue: null, MaxValue: null, Decimals: 2 };
$('#container').highcharts({
chart: {
height: 700,
width: 400,
plotBorderWidth: 1,
plotBorderColor: '#E4E4E4',
},
xAxis: {
title: {
useHTML: true,
text: param.Name + "( m/s )",
},
gridLineWidth: 1,
min: param.MinValue,
max: param.MaxValue,
gridLineDashStyle: 'Dot',
tickInterval: param.TickInterval
},
yAxis: {
title: {
text: 'Depth(m)',
},
reversed: true,
tickLength: 50,
gridLineDashStyle: 'Dot'
},
title: {
text: null,
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
formatter: function () {
return this.y;
}
},
series: [{
name: param.Name,
data: data,
color: param.Color,
dashStyle: param.LineStyle,
lineWidth: param.LineWidth,
type: "line"
}]
});
});
Can anyone help and tell me why it is behaving like this, and how I can fix it?
Your problem is that your data is not sorted by increasing X value. If you read the Series.data documentation it says that (API):
Note data must be sorted by X in order for the tooltip positioning and data grouping to work.
You should always sort your data like this before handing it over to Highcharts. Highcharts doesn't sort any data. Doing it by hand for your example your data should look like this:
var data=[[16,10],[24,3],[28,0]];
As in this JSFiddle demonstration, and everything works as intended.
I am attempting to create an area chart based on a timeline and everything works until I add a series marker. I have tried a few different patterns but can't get the chart to render with a marker.
Attempt 1: replace [x,y] item with [{x,y,marker}] object
data: [[1384219800000,2],
[{x:1384269600000,y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
Attempt 2: replace [x,y] item with [x, {y,marker}] object
data: [[1384219800000,2],
[1384269600000, {y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
This is the working area chart without the marker. This renders fine until I try to add the marker notation
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
style: {
display: 'none'
}
},
subtitle: {
style: {
display: 'none'
}
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
legend: {
borderWidth: 0,
enabled: true,
align: 'right',
verticalAlign: 'top',
x: -5,
y: -15,
floating: true
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 0,
lineColor: '#666666',
enabled: false
}
}
},
series:
[{
name: 'Items',
color: '#3399CC',
data: [[1384219800000,2],[1384269600000,7],[1384279900000,1]]
}],
navigation:
{
menuItemStyle: {
fontSize: '10px'
}
},
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
}
});
});
Your first syntax is close to correct, except you need to drop the [] around the {} and enable the marker for that specific point:
data: [
[1384219800000,2],
{
x:1384269600000,
y:7,
marker:{
enabled: true,
symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"
}
},
[1384279900000,1]
]
Fiddle here.