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.
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 cannot seem to get the tooltip value label to change using the tooltip: { pointFormat: "custom label"} option.
I'm integrating Highcharts in the chartkick gem, and I've ensured that chartkick is indeed using the highcharts adapter. The other library options work such as xAxis and yAxis.
Here is the code in question:
column_chart #registrations.joins(:clinic).group("clinics.name").count,
title: "Registrations Per Clinic",
library: {
tooltip: {
pointFormat: "Registrations: <b>{point.y}</b>"
},
xAxis: {
title: { text: "Clinic" }
},
yAxis: {
allowDecimals: false,
title: { text: "Number of Registrations" }
}
}
No matter what the tooltip renders with the word Value
You can try tooltip.formatter : Documentation
Looking to work with the below chart, but cannot get to change the title color to white and the axis and axis numbers to grey (or white). This should go above a dark background. Does anybody knows how to change the title color with echarts ?
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'Total memebers of the club',
fontColor: 'white',
display: true,
position: 'bottom'
},
tooltip: {},
legend: {
data: ['Total member']
},
xAxis: {
data: ["11/2018", "12/2018", "01/2019", "02/2019", "03/2019", "04/2019"]
},
yAxis: {},
series: [{
itemStyle: {normal: {color: 'white'}},
name: 'Total',
type: 'bar',
data: [5, 384, 612, 2344, 4670, 9372]
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
Give this a try. Add it under 'text:' like:
text: 'Total memebers of the club',
textStyle: {
color: '#ed2d2e'
}
As you can see on this JSFiddle, I want to show "%" to values in the dataTable below the graph : http://jsfiddle.net/fa32gywh/
I tried every options in my options :
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y} %'
}
}
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
format: '{value}%'
}
},
It works for my graph, but not the data in the dataTable.
You can style the table with css. Note that my selector works because you only have one series If you had multiple, you would have to be more specific.
.highcharts-data-table td.number:after {
content: '%'
}
http://jsfiddle.net/fa32gywh/1/
I want to make some tooltips visible in my d3 map. The tooltips are column charts generated by Highcharts regarding the chosen city. The trick is that everything is displaying correctly (axis, labels ...) except that the columns are not visible!
Here my d3 code (only the relevant parts):
var tooltip = d3.select("body")
.append("div")
.attr("id","tooltip")
.style("position", "absolute")
.style("visibility", "hidden");
cities.on("mouseover", function(d, i) {
d3.select(this).style('fill', '#95a5a6');
tooltip.html(zoomCityComm(d))
return tooltip.style("visibility", "visible")})
.on("mousemove", function(d, i){
return tooltip.style("top", (d3.event.pageY - 130) + "px").style("left",(d3.event.pageX - 120) + "px");
})
}
The function zoomCityComm is HighCharts (example of data: [5,10]):
function zoomCityComm(d) {
chart = new Highcharts.Chart({
chart : {
renderTo: 'tooltip',
type: 'column',
width:200,
height:200,
plotBackgroundColor: '#FCFFC5',
zoomType: 'xy'
},
title: {
text: "TOTO"
},
legend: {
enabled: false
},
xAxis: {
categories: ['In','Out']
},
yAxis: {
title: {
text: 'Sum',
style: {
color: '#4572A7'
}
},
labels: {
style: {
color: '#4572A7'
}
},
},
series:[{color: '#4572A7',data: res}]
});
return document.getElementById("tooltip").innerHTML;
}
When the graph is displayed in a "normal" div within the document, it appears correctly.
Sorry if my explanations are not clear but ask me for some details if needed.
Thanks
Cyril
You're setting the HTML content of the div twice, as highcharts renders it itself. In your mouseover handler function, it is enough to do
zoomCityComm(d);
instead of
tooltip.html(zoomCityComm(d));
For the interested, here's what's happening. Setting the HTML of the tooltip div from the return value of the function captures the first animation frame that highchart uses to grow the bars. As it is the first frame, the height of the bars is still 0 -- that is, the bars are there, but not visible because they have essentially no height. Replacing the HTML of the div means that the animation won't work anymore, as the elements that would be animated have been replaced.