I am trying to find the right css class to assign a new background colour to the group label of vis timeline. Here is my jsfiddle example.
I want to give the Label in front of the coloured area a background colour
var container = document.getElementById('visualization');
var timeline = new vis.Timeline(container);
var options = {
editable: true
};
var groups = new vis.DataSet([
{id: 0, content: 'First', value: 1, className: "default"},
{id: 1, content: 'Third', value: 3, className: "red"},
{id: 2, content: 'Second', value: 2, className: "blue"}
If you mean the red item ("Third"), then you can set the group label colour with something like:
.vis-labelset .vis-label.red {
background-color: red;
}
There are probably better ways to do this depending on the rest of your CSS structure - this is just consistent with the way you did your jsfiddle.
Related
I'm using Amchart 5, I trying to customize the colors, labels and other stuffs using CSS. But Amchart 5 only shows the charts as Canvas not as individual element like amchart 4.
amchart Canvas - Inspect Panel
If someone have solution please let me know, it'll be very helpful.
Thank you in advance.
I'm expecting a code to enables the css in the chart.
You cannot use CSS this way with amCharts 5 because, contrary to amCharts 4, it uses the Canvas API instead of SVG. There is an exception when you need HTML content, though...
Canvas API is generally way faster than SVG, however it paints outside DOM tree, which means you can't target individual chart elements via JavaScript or CSS.
Migrating from amCharts 4 – amCharts 5 Documentation
To customize chart elements, you have to define settings in your JS code. A label, for instance, can be configured like this:
am5.Label.new(root, {
text: "Title",
fill: am5.color("#ff0000"),
fontSize: 25,
fontWeight: "500",
fontStyle: "italic",
textAlign: "center",
x: am5.percent(50),
centerX: am5.percent(50),
dy: -60
// ...
});
You can find a complete list of settings there: Label – amCharts 5 Documentation
Here is a basic example:
am5.ready(() => {
let root = am5.Root.new("chartdiv");
let chart = root.container.children.push(am5xy.XYChart.new(root, {
paddingTop: 50
}));
// ========================= HERE =========================
chart.children.unshift(am5.Label.new(root, {
text: "Title",
fill: am5.color("#ff0000"),
fontSize: 25,
fontWeight: "500",
fontStyle: "italic",
textAlign: "center",
x: am5.percent(50),
centerX: am5.percent(50),
dy: -50
}));
// ==================================================
let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "category",
renderer: am5xy.AxisRendererX.new(root, {})
}));
let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
}));
let series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
categoryXField: "category",
valueYField: "value"
}));
let data = [{
category: "Category 1",
value: 10
}, {
category: "Category 2",
value: 20
}, {
category: "Category 3",
value: 15
}];
xAxis.data.setAll(data);
series.data.setAll(data);
});
#chartdiv {
width: 100%;
height: 350px;
}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<div id="chartdiv"></div>
Can you tell me how to track the click only on the stroke and not inside the body of the figure. The shapes in which you want to trace this can be anything: Star, Rect, etc. Perhaps you have encountered this.
I can't even imagine how it could be done.
You need to draw a shape with fillEnabled: false so only its stroke is visible. And only its stroke will listen to events. If you want to keep fill, then you have to use two shapes. One for fill, another for stroke and events detection.
const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
const layer = new Konva.Layer();
stage.add(layer);
const shape = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 50,
stroke: 'green',
strokeWidth: 10,
fillEnabled: false
});
layer.add(shape);
shape.on('click', () => {
console.log('shape click');
})
<script src="https://unpkg.com/konva#^8/konva.min.js"></script>
<div id="container"></div>
I am using GoJS and I want to color the circle inside my node based on certain condition. if the status is "will retire" then color of the circle will be red, if the status is "millenial" then color of the circle will be green, otherwise it will be white. I've made it looked like this
var colors = {
black: "#000000",
white: "#ffffff",
red: "#ff0000",
green: "#00cc00"
}
var fill1 = null;
if (status == "milenial") {
fill1 = colors["green"];
} else if (status == "akan pensiun") {
fill1 = colors["red"];
} else {
fill1 = colors["white"];
}
and in the diagram, by using go.shapes it looked like this
$(go.Shape, "Circle", {
row: 0,
column: 1,
rowSpan: 4,
margin: 3,
fill: fill1,
stroke: colors["white"],
strokeWidth: 1,
width: 25,
height: 25
},
new go.Binding("fill", "color")
I got the status value in the condition by using ajax.
In my code, the shape color fill will stay white/null (I don't really understand which one), while the stroke works fine. I've tried to console.log(fill1), and it showed the colors[] value. But I don't get it why the shape color won't change in the shape.
Please, can anyone explain why this happens and how to get the output I want? I am new and would appreciate any of your help. Thank you
The problem here is that although you are setting the fill when the node is created fill: fill1 the underlying model will not be update when you later update fill1 as its is set to the objects value rather than a reference to the object.
In this case the solution is to use a Binding to create a property you can update in a transaction, for example
GO(go.Shape, "Trapezoid1",
{
name: "SHAPE",
angle: 270,
strokeWidth: 2,
fill: "pink",
minSize: new go.Size(50, 50),
},
new go.Binding("fill", "status", function(type) {
switch (type) {
case "milenial":
return "#00cc00";
case "will retire":
return "#ff0000";
default:
return "#ffffff";
}})
);
Here we are binding "fill" to "status" and using a function to embed your logic into the node.
Elsewhere in you code (where you are using ajax) update the status
function update(key, status) {
// all model changes should happen in a transaction
myDiagram.model.commit(function(m) {
console.log("Finding Node " + key)
var data = m.findNodeDataForKey(key);
m.set(data, "status", status);
}, "update " + status + " for " + key);
};
update("RASP1","will retire" );
update("RASP2","milenial" );
In this example two of my nodes are identified as RASP1 and RASP1 and I'm setting the status to "will retire" and "milenial" respectively. The other two nodes are pink as this is the default colour
I'm plotting a map made by a series of points in HighCharts. I want that map to be properly scaled and be a perfect square.
Thus, i've set the chart height and width at the same value:
$(function () {
$('#map-container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy',
height: 225,
width: 225
},
title: {
text: null
},
subtitle: {
text: null
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: <?php echo $lat_bon_min; ?>,
max: <?php echo $lat_bon_max; ?>,
labels: {
enabled: false
},
title: {
text: null
}
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: <?php echo $lon_bon_min; ?>,
max: <?php echo $lon_bon_max; ?>,
labels: {
enabled: false
},
title: {
text: null
}
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 2
}
}
},
series: [{
showInLegend: false,
type: 'scatter',
color: 'rgba(223, 83, 83, .5)',
data: map_data,
keys: ['time', 'x', 'y']
}]
});
});
The problem is that the chart container is a square, but the plot area is not.
I made a screenshot of the result. Red line is the map, black square is the chart container (which is a perfect square), blue rectangle is the plot area which you can see is not a square.
How can i set plot area size in order to make it a perfect square?
You can extend Highcharts with new function. Here you can find information about extending Highcharts:
http://www.highcharts.com/docs/extending-highcharts/extending-highcharts
As you will see in my demo, I wrapped setChartSize function and give them possibility to use parameters from your chart options:
chart: {
plotAreaWidth: 300,
plotAreaHeight: 200
},
Function is also positioning your plot area in the middle of chart container.
example:
http://jsfiddle.net/izothep/eph5secj/2/
In your chart default values of spacing are used and the biggest is a bottom spacing with value of 15 while others are of value 10 each. When setting all spacing to 15 you will get a square (196 x 196 px).
Example: http://jsfiddle.net/5825mzLs/
You might want to use marginLeft, marginRight, marginTop and marginBottom properties.
The margin options (marginLeft, marginTop etc) give the margin to the actual plot area and does not apply to other elements on the chart (labels, legend etc)
See example in Hightscharts Docs: https://www.highcharts.com/docs/chart-design-and-style/design-and-style
we use the highchart control with Angular and bootstrap.
To adjust the vertical space between the chart and the legend (both are rendered by highchart as svg elements), we set the y property of the legend on page load (in the controller) like this:
$scope.chartContracts = {
options: {
chart: {
type: 'pie',
marginBottom: 50
},
legend : {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 4,
Now in one of the Bootstraps layouts, the spacing (y) should be -10 in stead of 4 because for some reason an extra spacing is added.
So it should be based on media query or something similar I guess?
The question is how to do this... I tried with css but I can't seem to style SVG elements (they are called <g>)?
You can check window width and then return correct value.
var wWidth = $(window).width(),
value;
if(wWidth < 400) {
value = 5;
} else {
value = 10;
}
//scope
y: value