We Keep Coding

ChartJS - Changing the padding of the labels in the legend adds padding to the top of the legend itself

I have this chart:
But it's a bit ambiguous as to which color belongs to which label. So I decided to add a little padding to the labels. In ChartJS documentations we have:
Name Type Default Description
padding number 10 Padding between rows of colored boxes.
So I double this number:
options: {
legend: {
position: "top",
labels: {
boxWidth: 5,
usePointStyle: true,
padding: 20
}
}
}
And I can see that it works:
But now it also adds padding to the top of the legend. To make the difference more noticeable, I'm going to exaggerate and set the padding to 50:
I'm trying add padding only between the labels of the legend, so that it's clear which box (colored circles) belong to which label. How can I do that?

How can I add more padding to tree chart in echartjs?

For some tools, we use tree chart from echartjs .
Everything works fine but I have one problem and it is the size of padding in tree chart.
As you can see in this image everything is fine, but I can't enable more padding to this chart :
i want this chart for my friend website (امروز چندمه)
And this is my code :
myChart.showLoading();
$.get('data/asset/data/flare.json', function (data) {
myChart.hideLoading();
echarts.util.each(data.children, function (datum, index) {
index % 2 === 0 && (datum.collapsed = true);
});
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series:[
{
type: 'tree',
data: [data],
top: '1%',
left: '15%',
bottom: '1%',
right: '7%',
symbolSize: 7,
orient: 'RL',
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
},
leaves: {
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right'
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
});
Thanks :)

You need to change the values of the top and bottom properties to negative values, and the left and right properties to larger positive values.
For example, set top : -10% and bottom: -15%. Then Right: 20% and left:15%. You will have to try different values until you find a combination that suits your situation.The higher the right and left values, and the lower the top and bottom values, the more pronounced the effect. That is, making your chart taller and narrower, thus spacing or padding out the values.
You could also reduce the value of the symbolSize property e.g to 1.
Here is the link to the JsFiddle

Echart version 4 removed the padding option from the nodes. I also tried to fix this but there is an issue on echart github. You can use other features like mouseOver.

Seems like in Echart version 4 there is no way to define padding for nodes
But there is a way to avoid collapsing of nodes.
This tree is gonna take as much space (width and height) as you allow it to take.
So you can just specify bigger height value for outer div. And then overflow: auto; for next div.
<div style="overflow:auto">
<div style="min-height:2000px">
<EchartsSVG/>
</div>
</div>
You can create a formula to count your nodes and calculate min-height

Chart.js - style legend: smaller circles

I've create a line chart with chart.js. I changed the legend symbol form from rects to circles by using:
legend: {
display: true,
labels: {
usePointStyle: true,
},
}
I want to change the size of the circles. But according to the documentation this is only possible if I also change the font size:
Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
- https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
Does anyone know if there is another option to change the size? Or do I have to use generateLabels().
Here is a codePen to take a look on that.

You can use the boxWidth option to influence the size of the point in the legend:
options: {
legend: {
labels: {
usePointStyle: true,
boxWidth: 6
}
}
}
read the documentation of chartjs about legend

Add one centered label to a donut chartist-js

Since I could not find and answer for this question, I hope it's not a duplicate. I'm using chartist.js, and I make a simple donut, that's pretty easy and straight forward, but now I'd like to disable the labels, which works fine and add a single lable inside of the donut (Thhis is the problem). It's not needed, that the label gets greated, by the chart itself, it would be sufficient if it's just a new div or something else.
My Code so far:
<div class="ct-chart1 ct-chart ct-perfect-fourth"></div>
and
new Chartist.Pie('.ct-chart1', {
labels: [],
series: [75, 25]
}, {
donut: true,
width: '300px',
height: '200px',
donutWidth: 30,
startAngle: 0,
total: 100
});
I already tried to make the chart itself a flexbox and add the label as child and center it that way, but that did not work and I tried to surround the chart with a new div, but that let's the chart disappear.
<div>
<div class="ct-chart1 ct-chart ct-perfect-fourth"></div>
</div>

I'd use the draw event to center labels to the middle of the chart. Check this bin http://jsbin.com/hipafu/edit?html,css,js,output
Also watch out for the styles:
.ct-label {
dominant-baseline: central;
text-anchor: middle;
}

Highcharts Y-axis title text length is more than chart's height

I am working on highcharts. In my code, sometimes Y-axis title text is more than chart's height.
Ex. I am create one chart. In this chart, height is 400px but my Y-axis title text is long so some part of the text is not display. so what can i do?
see in jsfiddle

You can set width on title and adapt margin.
yAxis: {
title: {
enabled: true,
text: 'Custom with <b>simple</b> <i>markup</i>Custom with <b>simple</b> <i>markup</i>Custom with <b>simple</b> <i>markup</i>Custom with <b>simple</b> <i>markup</i>',
margin: 40,
style: {
width: 200,
fontWeight: 'normal'
}
}
},
Example: http://jsfiddle.net/EUSVQ/12/