I am add option
lang: {
thousandsSep: ","
},
and
format: '{value:,.0f}'
but it's show blank instead comma
https://jsfiddle.net/cpmh8f24/3/
this my chart sample
It's work:
Highcharts.setOptions({
lang : {
thousandsSep:','
}
});
Related
When there are too many characters in the title of this section, it is very difficult to see. Therefore, I would like to limit the number of characters in the part that is always visible. Also, I would like to be able to see all the letters of the title in the popup when the mouse is hovered.
This is my jsfiddle
<script src="https://code.highcharts.com/7.1.1/highcharts.js"></script>
<script src="https://code.highcharts.com/7.1.1/modules/venn.js"></script>
<script src="https://code.highcharts.com/7.1.1/modules/exporting.js"></script>
<script src="https://code.highcharts.com/7.1.1/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
Highcharts.chart('container', {
accessibility: {
point: {
descriptionFormatter: function(point) {
var intersection = point.sets.join(', '),
name = point.name,
ix = point.index + 1,
val = point.value;
return ix + '. Intersection: ' + intersection + '. ' +
(point.sets.length > 1 ? name + '. ' : '') + 'Value ' + val + '.';
}
}
},
tooltip: {
pointFormat: 'data: {point.name}',
},
series: [{
type: 'venn',
name: 'ユーザー名',
data: [{
sets: ['Good'],
value: 2,
name: 'When there are too many characters in the title of this section, it is very difficult to see. Therefore, I would like to limit the number of characters in the part that is always visible. Also, I would like to be able to see all the letters of the title in the popup when the mouse is hovered.',
overflow: 'allow',
crop: false
}, {
sets: ['Cheap'],
value: 2
}, {
sets: ['Good', 'Cheap'],
value: 1,
}]
}],
title: {
text: 'The Unattainable Triangle'
}
});
https://www.highcharts.com/docs/chart-design-and-style/style-by-css#what-can-be-styled
However, layout and positioning of elements like the title or legend can not be controlled by CSS.
I thought about styling it with CSS, but I was told that the title attribute cannot be controlled with CSS.
Is there any other way?
What I want to do
Shorten the name when it has too many characters.
Display full text on hover
For dataLabel setting use dataLabels.style.textOverflow, in dataLabels.format you can add HTML tags and if you add class you can change behavior in CSS.
plotOptions: {
venn: {
dataLabels: {
useHTML: true,
format: '<p class="truncate"><b>{point.name}</b></p>',
style: {
textOverflow: 'ellipsis'
}
}
}
},
https://api.highcharts.com/highcharts/plotOptions.venn.dataLabels
I am using Charts.js to display bar graphs and bubble charts.
However, my titles for these graphs contain '&' but it is shown as &
How can I avoid this so that '&' is displayed as it is in the labels and titles of charts.
Below is my code:
window.myBar = new Chart(ctx, {
type: 'bubble',
data: {
datasets: data_sets
},
options: {
legend: {
position: 'bottom',
},
title: {
display: true,
fontSize: 20,
text: '<%= group.first&.name%>'
}
}
});
Replacing
<%= group.first&.name %>
with
<%= group.first&.name&.html_safe %>
in the text of the title fixed the issue for me.
In my code, I am loading many files during navigation of chart but i want to include feathure like zoomType and hover and mousever on some specific files. For example, i am changing zoomType='x' of chart by reading sample.json file.
$(function() {
var chart;
var options = {
chart : {
type : 'polygon',
renderTo : 'container',
zoomType:''
},
title : {
text : ''
},
credits: {
enabled: false
},
$.getJSON('sample.json', function(data) {
options.series=data;
options.chart.zoomType='x'; /*including zoom feature only for sample.json file*/
var chart = new Highcharts.Chart(options);
});
But this code does not work. How can i fix this error?
See the working demo
I am setting 'x' for default series and zoomtype 'y' for next json data (when you click plus icon), see your previous code and demo at plunker link
$("#container").html("<div style='style:margin:0 auto'>Loading Data</div>") ;
$.getJSON('data10.json', function(data) {
options.series=data;
options.chart.zoomType='x';
chart = new Highcharts.Chart(options);
});
I'm using highcharts and I want to prepend some html to the legend that is automatically generated.
legend: {
useHTML: true,
labelFormatter: function(){
return '<div>Div that I want to prepend</div>';
}
}
The above code will replace the legend not append to it.
Can anybody tell me how I can prepend to the legend rather than overwrite it?
var chart = new Highcharts.Chart({.......});
$(chart.legend.group.div).find('span').append('<div>Div that I want to prepend</div>');
labelFormatter: function () {
return this.name + '<div>Div that I want to prepend</div>';
}
I have implemented autocomplete using Jquery. I have also implemented highlighting the matching text. I am using <strong> tag in the high light function. When I go through the autocomplete dropdown one by one using keyboard arrows, the text where I am currently on, is displayed in the text box. When it displays, it displays with the <strong> tag. Any suggestions to remove the tag? I have given my code below.
<input type="text" id="institution-list"/>
<script type="text/javascript" language="javascript">
$(function () {
$("#institution-list").autocomplete({
source: function (request, response) {
$.ajax({
url: "/home/findinstitutions", type: "POST", dataType: "json",
data: { searchText: request.term, maxResults: 10 },
success: function (data) {
response($.map(data, function (item) {
return { label: highlight(item.InstitutionName, request.term),
id: item.InstitutionId
};
}));
}
});
},
minLength: 3
})
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html(item.label))
.appendTo(ul);
};
});
function highlight(s, t) {
var matcher = new RegExp("(" + $.ui.autocomplete.escapeRegex(t) + ")", "i");
return s.replace(matcher, "<strong>$1</strong>");
}
</script>
I think that the problem is that you're taking the label of your recently found data and render it as HTML, instead of plain text. Thus, instead of Berkeley, your autocomplete is showing <strong>Ber</strong>keley.
Try to parse it and remove any HTML tag before displaying it:
function sanitize(text){
var regex = /(<([^>]+)>)/ig;
return text.replace(regex, "");
}
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html(sanitize(item.label)))
.appendTo(ul);
};
The regular expression was extracted from here: Remove HTML Tags in Javascript with Regex
Find below the solution I found for my problem
Existing code:
response($.map(data, function (item) {
return { label: highlight(item.InstitutionName, request.term),
id: item.InstitutionId
};
Solution:
response($.map(data, function (item) {
return { label: highlight(item.InstitutionName, request.term),
value: item.InstitutionName,
id: item.InstitutionId
};
The original code returned the label (which had embedded html tags) and no value. Since there was no value, the textbox used the label to display. Now, I explicitly assign the value of the text box with my text (without html tags) and that fixes my problem.
Here is the snapshot of how it appears now.