I have a line chart with some background polygons that need labels, much like in this post. However, my chart uses the zoom capabilities of HighCharts. The chart.events.render will draw new labels on zoom, but it doesn't remove the old ones, which do not zoom either. Using this.customLabel.destroy() doesn't seem to do the job. So I end up with excess labels in the wrong places. How do I remove the old labels with each new render, or is there now a better way to label polygons?
Try this approach:
chart: {
events: {
render() {
const chart = this;
if (chart.customLabel) {
chart.customLabel.destroy()
}
chart.customLabel = chart.renderer.label('test label', Math.random() * 200 + chart.plotLeft, Math.random() * 200 + chart.plotTop)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
}
}
},
Demo: https://jsfiddle.net/BlackLabel/g1v4dwcn/ - resize the viewer in the jsfiddle to see the effect.
Edit by original poster: see comment about "two different SVG Elements"
I need to draw custom markers on a highchart at particular intervals.
I have managed to create a custom bar using the following javascript:
Highcharts.Renderer.prototype.symbols.hline =
function(x, y, width, height) {
return ['M',x-30 ,y + height / 2,'L',x+width+30,y + width / 2];
};
https://jsfiddle.net/jimmain/9gqca584/5/
My problem is that I need to also draw a single pixel border around the pink box.
I am using a stacked bar chart for the chart.
Ideally I would also like to increase the padding underneath the bar (between the bar and the x-axis) but I am not sure it can be independently increased.
It's not clear to me how I can use the renderer to change color. I could just draw one black box, and then another smaller inset pink box on top, but I am not clear on how to change colors in the SVG renderer.
SVG's path can not have border, so solution is to use renderer.rect(): https://jsfiddle.net/BlackLabel/9gqca584/43/
Note: It's bar series, so chart is inverted, that means we need to swap x with y and height with width.
Snippet:
function addRect(chart) {
return chart.renderer.rect(
chart.yAxis[0].toPixels(5) - 4, // 4 = half width
chart.xAxis[0].toPixels(0),
8,
5
).attr({
fill: 'rgba(253,0,154,0.9)',
stroke: 'black',
'stroke-width': 2,
zIndex: 5
}).add();
}
function positionRect(chart, rect) {
rect.animate({
x: chart.yAxis[0].toPixels(5) - 4, // 4 = half width
y: chart.xAxis[0].toPixels(0) - chart.series[0].points[0].pointWidth / 2,
height: chart.series[0].points[0].pointWidth
});
}
$(function() {
$('#container').highcharts({
legend: {
enabled: false
},
chart: {
type: 'bar',
events: {
load: function() {
this.customRect = addRect(this);
positionRect(this, this.customRect);
},
redraw: function() {
positionRect(this, this.customRect)
}
}
},
...
});
});
I am trying to implement charts using Dimple.js and below is the code that i am trying to animate both the series (Bar and Line here) separately but it looks like line series animates like bar series (from bottom to top). However, i was expecting more like animation performed in here: http://bl.ocks.org/duopixel/4063326
<div id="divBarWithLineChart" class="DimpleChart"></div>
var width = $('#divBarWithLineChart').width();
var height = $('#divBarWithLineChart').height();
var svg = dimple.newSvg("#divBarWithLineChart", width - 20, height);
d3.json("Scripts/Data/Data.json", function (data) {
// Filter the data for a single channel
data = dimple.filterData(data, "Channel", "Hypermarkets");
// Create the chart
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 470, 300)
// Add an x and 2 y-axes. When using multiple axes it's
// important to assign them to variables to pass to the series
var x = myChart.addCategoryAxis("x", "Brand");
var y1 = myChart.addMeasureAxis("y", "Price");
var y2 = myChart.addMeasureAxis("y", "Sales Value");
// Order the x axis by sales value desc
x.addOrderRule("Sales Value", true);
// Color the sales bars to be highly transparent
myChart.assignColor("Sales", "#222222", "#000000", 0.1);
// Add the bars mapped to the second y axis
myChart.addSeries("Sales", dimple.plot.bar, [x, y2]);
// Add series for minimum, average and maximum price
var min = myChart.addSeries("Min", dimple.plot.line, [x, y1]);
min.aggregate = dimple.aggregateMethod.min;
myChart.setMargins("70px", "30px", "70px", "70px");
myChart.assignColor("Sales", "#083f65", "#083f65", 1);
myChart.assignColor("Min", "#c62828", "#c62828", 1);
myChart.staggerDraw = true;
myChart.ease = "bounce";
myChart.draw(1000);
Is it possible to animate line series separately? Can anyone please help?
Thanks in advance...
Yes this is possible. If you inspect the svg line in the chrome developer bar, it's an svg path which can be animated with css...the path class name is dimple-line. So just add a bit of css for this class name and when the line is drawn it mimicks the d3 example exactly (tried it at my site http://dimplejs.org) and it worked perfectly...
<style>
.dimple-line {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
or for a dashed effect try this...
.dimple-line {
stroke-dasharray: 20;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
See this site for other variations of this technique...https://css-tricks.com/svg-line-animation-works/
Hello I am trying to create the following donut chart using Chartist.js:
GOAL CHART
This is what the chart looks like currently:
Chartist.js Donut Chart
I am trying to find where or how I can change the colors of this chart to match the 1st donut chart. The red and pink seem to be the defaults. I haven't been able to find any documentation of how to accomplish this goal. I would also like to customize the size of the stroke and the size of the chart itself. Any help is greatly appreciated!
Current code:
// ** START CHARTIST DONUT CHART ** //
var chart = new Chartist.Pie('.ct-chart', {
series: [70, 30],
labels: [1, 2]
}, {
donut: true,
showLabel: false
});
chart.on('draw', function(data) {
if(data.type === 'slice') {
// Get the total path length in order to use for dash array animation
var pathLength = data.element._node.getTotalLength();
// Set a dasharray that matches the path length as prerequisite to animate dashoffset
data.element.attr({
'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
});
// Create animation definition while also assigning an ID to the animation for later sync usage
var animationDefinition = {
'stroke-dashoffset': {
id: 'anim' + data.index,
dur: 1000,
from: -pathLength + 'px',
to: '0px',
easing: Chartist.Svg.Easing.easeOutQuint,
// We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
fill: 'freeze'
}
};
// If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
if(data.index !== 0) {
animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
}
// We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
data.element.attr({
'stroke-dashoffset': -pathLength + 'px'
});
// We can't use guided mode as the animations need to rely on setting begin manually
// See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
data.element.animate(animationDefinition, false);
}
});
// ** END CHARTIST DONUT CHART ** //
HTML:
<div class="ct-chart ct-perfect-fourth"></div>
So I figured it out...
I had to go into css and override the defaults. I had to make sure that the css file was loaded after the cdn for Chartist. Then just set width and height of ct-chart.
.ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut {
stroke: #0CC162;
}
.ct-series-b .ct-bar, .ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-slice-donut {
stroke: #BBBBBB;
}
.ct-chart {
margin: auto;
width: 300px;
height: 300px;
}
Then I had to add donutWidth key to the chart object to set the stroke width:
var chart = new Chartist.Pie('.ct-chart', {
series: [7, 3],
labels: [1, 2]
}, {
donut: true,
donutWidth: 42,
showLabel: false
});
A little later here, but you can provide class names to the data series to allow you to change the colors on each graph independently:
From the docs:
The series property can also be an array of value objects that contain
a value property and a className property to override the CSS class
name for the series group.
Instead of:
series: [70, 30]
Do this:
series: [{value: 70, className: 'foo'}, {value: 30, className: 'bar'}]
and then you can style however you'd like with the stroke css property
Chartist relies on modifying CSS to control the colors, sizes, etc. of the charts.
I'd suggest having a look at the documentation here to learn lots of cool tips and tricks: https://gionkunz.github.io/chartist-js/getting-started.html
But to your specific question, here's an except from the above link that tells you how to control the donut chart:
/* Donut charts get built from Pie charts but with a fundamentally difference in the drawing approach. The donut is drawn using arc strokes for maximum freedom in styling */
.ct-series-a .ct-slice-donut {
/* give the donut slice a custom colour */
stroke: blue;
/* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style attribute */
stroke-width: 5px !important;
/* create modern looking rounded donut charts */
stroke-linecap: round;
}
I've managed to change the stroke color by overriding this class. You can change ct-series-b to which bar graph you change to change color (ct-series-a, ct-series-b and etc).
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.css" />
<style>
.ct-series-b .ct-bar, .ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-slice-donut {
stroke: goldenrod;
}
</style>
</head>
<body>
<div class="ct-chart ct-perfect-fourth"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.js"></script>
<script>
window.onload = function() {
var data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
]
};
var options = {
seriesBarDistance: 10
};
var responsiveOptions = [
['screen and (max-width: 640px)', {
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: function (value) {
return value[0];
}
}
}]
];
new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
}
</script>
</body>
</html>
What I did to make it work is the following. I am using a bar chart, but I guess it is the same for all graphs.
my css
.ct-chart .ct-series.stroke-green .ct-bar {
stroke: green;
}
.ct-chart .ct-series.stroke-yellow .ct-bar {
stroke: rgba(255, 167, 38, 0.8);
}
.ct-chart .ct-series.stroke-red .ct-bar {
stroke: rgba(230, 20, 20, 0.8);
}
chart conf
{
labels: ['Jan', 'Feb'],
series: [
{className:"stroke-green", meta:"OK", data: [12,23] },
{className:"stroke-yellow", meta:"Rest", data: [34,34]},
{className:"stroke-red", meta: "NOK", data: [2, 5] },
]
}
This code worked for me to change the color of the stroke:
// Prepare chart params
var chartColors = ['orange'];
var chartWidth = 9;
var percent = 77;
var arc = percent ? 360 * percent / 100 : 0;
// Create chart
var chart = new Chartist.Pie('.my-donut', {
series: [arc],
labels: [percent + '%'],
}, {
donut: true,
donutWidth: chartWidth,
startAngle: 0,
total: 360,
});
// Set chart color
chart.on('draw', function(data) {
if(data.type === 'slice') {
if (chartColors[data.index]) {
data.element._node.setAttribute('style','stroke: ' + chartColors[data.index] + '; stroke-width: ' + chartWidth + 'px');
}
}
});
Bar charts with a single serie - use nth-child(N):
.ct-bar:nth-child(1){
stroke: #379683 !important;
}
.ct-bar:nth-child(2){
stroke: #91A453 !important;
}
.ct-bar:nth-child(3){
stroke: #EFB200 !important;
}
The answers above wont work for me since I'm dynamically excluding categories with 0 points. You can do it pragmatically though. You can directly modify the svg node. My charts use fill instead of stroke but the method should be the same. This worked for me in Chrome:
const data = {
series: [],
labels: []
};
const pieColors = [];
enrollment.CoverageLevelTotals.forEach(e => {
if (e.Total === 0) return;
data.series.push(e.Total);
data.labels.push(e.Total);
pieColors.push(colors[e.CoverageLevel]);
});
new Chartist.Pie(document.getElementById(canvasId), data,
{
width: '160px',
height: '160px',
donut: true,
donutWidth: 50,
donutSolid: true,
showLabel: (data.series.length > 1)
}).on('draw',function (data) {
if (data.type !== 'slice') return;
data.element._node.setAttribute('style','fill:' + pieColors[data.index]);
});
}
I have a canvas drawn in Fabric.js that i am adding a group of rectangles to, i want to limit the edges of those rectangles as a group to not go outside a certain area.
Imagine making a stripy t-shirt, the stripes are make by using a series of rectangles and i need to keep them to the shape of the t-shirt.
I think its better to clip the entire canvas to the shape of the t shirt, so anything i add to it remains within the t-shirt but i am stuck. So far i am only clip to basic circles and rectangles.
Thanks
You can just render a shape inside canvas.clipTo :)
I just loaded a random SVG shape in kitchensink and did this:
var shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
shape.render(ctx);
};
As you can see, entire canvas is now clipped by that SVG shape.
You may also try this one: http://jsfiddle.net/ZxYCP/198/
var clipPoly = new fabric.Polygon([
{ x: 180, y: 10 },
{ x: 300, y: 50 },
{ x: 300, y: 180 },
{ x: 180, y: 220 }
], {
originX: 'left',
originY: 'top',
left: 180,
top: 10,
width: 200,
height: 200,
fill: '#DDD', /* use transparent for no fill */
strokeWidth: 0,
selectable: false
});
You can simply use Polygon to clip. Answer is based on #natchiketa idea in this question Multiple clipping areas on Fabric.js canvas