10 examples of 'chartjs label position' in JavaScript

Every line of 'chartjs label position' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
229function addXAxisLabel(chart, label, labelLengthLimit) {
230 if (labelLengthLimit === void 0) { labelLengthLimit = 64; }
231 var shortenedLabel = limitLabelLength(label, labelLengthLimit);
232 var shortenedLabelSVG = chart.chart.append("text").attr("class", "x label").attr("text-anchor", "middle").attr("x", chart.margin.left + chart.width / 2).attr("y", chart.fullHeight - 16).text(shortenedLabel);
233 if (label.length > labelLengthLimit) {
234 shortenedLabelSVG.append("svg:title").text(label);
235 }
236}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

352createLabels({ root }) {
353 const uid = this.uid;
354 const radius = this.getOuterRadius();
355
356 root
357 .append('g')
358 .attr('id', `labels-${uid}`)
359 .attr('transform', `translate(${radius}, ${radius})`);
360}
55return function ctBarLabels(chart) {
56 if (chart instanceof Chartist.Bar) {
57
58 options = Chartist.extend({}, defaultOptionsBase, options);
59 if (chart.options.horizontalBars) {
60 options = Chartist.extend({}, defaultOptionsHorizontalBars, options);
61 } else {
62 options = Chartist.extend({}, defaultOptionsVerticalBars, options);
63 }
64 var highValue;
65 if (options.thresholdOptions) {
66 highValue = getHighValue(chart);
67 }
68
69 chart.on('draw', function(data) {
70 if (data.type === 'bar') {
71
72 // bar value is in a different spot depending on whether or not the chart is horizontalBars
73 var barValue = data.value.x === undefined ? data.value.y : data.value.x;
74 var indexClass = options.includeIndexClass ? ['ct-bar-label-i-', data.seriesIndex, '-', data.index].join('') : '';
75 var thresholdClass = getThresholdClass(options.thresholdOptions, highValue, barValue);
76
77 if (options.showZeroLabels || (!options.showZeroLabels && barValue != 0)) {
78 data.group.elem('text', {
79 x: ((options.startAtBase && chart.options.horizontalBars) ? data.x1 : data.x2) + options.labelOffset.x,
80 y: ((options.startAtBase && !chart.options.horizontalBars) ? data.y1 : data.y2) + options.labelOffset.y,
81 style: 'text-anchor: ' + options.textAnchor
82 }, [options.labelClass, indexClass, thresholdClass].join(' ')).text(options.labelInterpolationFnc(barValue));
83 }
84 }
85 });
86 }
87};
304function moveLabel() {
305 var dX = d3.event.x;// subtract cx
306 var dY = d3.event.y;// subtract cy
307 d3.select(this).attr("transform", "translate(" + dX + ", " + dY + ")");
308}
262private getLabelPosition(d: TNode): string {
263 return d.labelPosition() === "auto" ? this.getAutomaticLabelPosition(d) : d.labelPosition()
264}
57_addPieLabel(chart) {
58 const coord = chart.get('coord');
59 const geom = chart.get('geoms')[0];
60 const shapes = geom.get('shapes');
61 const { center } = coord; // 极坐标圆心坐标
62 const r = coord.circleRadius; // 极坐标半径
63 const canvas = chart.get('canvas'); // 获取 canvas 对象
64 const labelGroup = canvas.addGroup(); // 用于存储文本以及文本连接线
65
66 shapes.forEach((shape) => {
67 const shapeAttrs = shape.attr();
68 const origin = shape.get('origin');
69 const { startAngle, endAngle } = shapeAttrs;
70 const middleAngle = (startAngle + endAngle) / 2;
71 const routerPoint = this._getEndPoint(center, middleAngle, r + OFFSET);
72 const textName = new Shape.Text({
73 attrs: {
74 x: routerPoint.x,
75 y: routerPoint.y,
76 fontSize: 12,
77 fill: origin.color,
78 text: origin._origin.name,
79 textBaseline: 'middle',
80 lineHeight: 12,
81 },
82 origin: origin._origin, // 存储原始数据
83 });
84 labelGroup.add(textName);
85 });
86 canvas.draw();
87}
211function drawChart(labels, data) {
212 var ctx = document.getElementById('statusChart').getContext('2d');
213 var myChart = new Chart(ctx, {
214 type: 'bar',
215 data: {
216 labels: labels,
217 datasets: [{
218 label: '# of Containers',
219 data: data,
220 backgroundColor: [
221 'rgba(120,164,107, .2)',
222 'rgba(199, 192, 40, .2)',
223 'rgba(255, 0, 0, .2)',
224 'rgba(255, 0, 0, .2)',
225 ],
226 borderColor: [
227 'rgba(120,164,107, 1)',
228 'rgba(199, 192, 40, 1)',
229 'rgba(255, 0, 0, 1)',
230 'rgba(255, 0, 0, 1)',
231 ],
232 borderWidth: 1
233 }]
234 },
235 options: {
236 scales: {
237 yAxes: [{
238 ticks: {
239 beginAtZero: true
240 }
241 }]
242 }
243 }
244 });
245}
141function formatLabel(
142 [timeStart, timeEnd],
143 unit,
144 labelWidth,
145 formatOptions = defaultHeaderFormats
146) {
147 let format
148 if (labelWidth >= 150) {
149 format = formatOptions[unit]['long']
150 } else if (labelWidth >= 100) {
151 format = formatOptions[unit]['mediumLong']
152 } else if (labelWidth >= 50) {
153 format = formatOptions[unit]['medium']
154 } else {
155 format = formatOptions[unit]['short']
156 }
157 return timeStart.format(format)
158}
118legendPosition(): "top" | "bottom" {
119 return this.xAxis() === "x1" ? "top" : "bottom"
120}
432renderSeriesLabel(paper, positionSet, labels, labelTheme) {
433 const labelSet = paper.set();
434 const attributes = {
435 'font-size': labelTheme.fontSize,
436 'font-family': labelTheme.fontFamily,
437 'font-weight': labelTheme.fontWeight,
438 fill: '#ffffff',
439 opacity: 0
440 };
441
442 labels.forEach((categoryLabel, categoryIndex) => {
443 categoryLabel.forEach((label, seriesIndex) => {
444 const seriesLabel = raphaelRenderUtil.renderText(
445 paper,
446 positionSet[categoryIndex][seriesIndex].end,
447 label, attributes
448 );
449
450 seriesLabel.node.style.userSelect = 'none';
451 seriesLabel.node.style.cursor = 'default';
452
453 labelSet.push(seriesLabel);
454 });
455 });
456
457 this.labelSet = labelSet;
458
459 return labelSet;
460}

Related snippets