![](\"https:\/\/mindfusion.dev\/samples\/javascript\/chart\/line_chart_tooltips.png\" "\\"JavaScript")
<\/a><\/p>\nI. Initial Setup<\/strong><\/p>\n We start by creating a blank HTML page and there we initialize the HTML Canvas element that will be needed by the Js Chart library.<\/p>\n You can initialize the canvas as you want – there are no special requirements as to the size, position, scroll settings or anything else. What is important is that you add an id for that canvas – it will be used by the chart library. At the bottom of the page, right before the closing BODY tag we add a reference to the charting JavaScript files that represent the chart library:<\/p>\n We also add a reference to another JavaScript file called LineChartTooltips.js. We haven’t created it yet, but this will be the file that will hold the JavaScript code for our chart.<\/p>\n II. Initializing the Line Chart In the LineChartTooltips JavaScript file we first include a reference to the Intellisense file so we can use code completion.<\/p>\n Then we add mappings to the namespaces that we want to use:<\/p>\n Now we create the JavaScript chart object. We need a reference to the HTML canvas element, which we get using its id:<\/p>\n We use the clientWidth and clientHeight properties of the offsetElement for the chart to give the chart its size.<\/p>\n Next we create the LineChart<\/a> control and set its title and subtitle.<\/p>\n III. Labels<\/strong><\/p>\n The labels for the X and Y axes are set with two lists:<\/p>\n By default the labels at the axes are the intervals. We can replace them with the labels of a given chart series by using the supportedLabels<\/a> property. This property tells the control at which chart element the labels of the series should be rendered – X or Y axis, tooltip, data labels etc. The members are from the LabelKinds<\/a> enumeration.<\/p>\n The LineChart control uses series that support X and Y values. The best match is the Series2D class. This class supports one list with labels, which are always drawn at the data points. The easiest thing for us to do is to customize the Series2D<\/a> and make it accept two lists with labels, which we will show them on both axes. Here is how we create the custom class by inheriting from Series2D<\/a><\/p>\n Our custom class is called SeriesWithAxisLabels. It accepts two lists with labels in the constructor. With one of them we call the constructor of the base class. The other we assign to a new property called yLabels.<\/p>\n Now we need to override the getLabel method and return the right label for the X and Y axis.<\/p>\n The getLabel method is responsible for providing the correct label according to the kind of labels that is requested. Here we check if we are asked for a label at the X or Y axis and return the label with the correct index from the xLabels or yLabels arrays. Here is how we create that series, which serves only to provide labels for the axes:<\/p>\n Note that the data for the X and Y values of series0 corresponds to the positions on the axes where the labels should be rendered.<\/p>\n IV. Data<\/strong><\/p>\n The data for the chart is provided by two series. They are also of type Series2D<\/a> However, we do not want them to render the labels at the data points, which is their default behaviour. We would customize once again the Series2D<\/a> class and make the labels be used for tooltips and not the data points.<\/p>\n We define a new SeriesWithToolTip class that overrides Series2D<\/a><\/p>\n The difference is the getLabel<\/a> method. When asked for a label for the tooltip it returns the label at the given position from the series’ labels list:<\/p>\n We create a data series from the SeriesWithToolTip kind this way:<\/p>\n We generate the tooltip in a list, because we want the text to combine data from the xLabels and its yData list.<\/p>\n V. Styling the Chart<\/strong><\/p>\n the JavaScript Chart library supports several styles to be applied on the chart depending on what you want to achieve. In our case the best choice is the PerSeriesStyle<\/a> class, which colours all the elements of a Series<\/a> with the subsequent brush from its strokes and fills collections.<\/p>\n The PerSeriesStyle class also provides us with properties to specify the DashStyle and the strokeThickness of the brushes.<\/p>\n The styling of the axes and the fonts is done via the properties of the Theme<\/a> class. Each chart has a theme<\/a> property of type Theme. You can use it to customize many properties of the chart:<\/p>\n Note the dataLabelsFontSize property here. It regulates the font not only for the data labels but for the labels of the legend. That is why we set it, though we do not render data labels. There are several dataLabels properties like dataLabelsFontName, which customize different aspects of the labels at chart series and legend.<\/p>\n VI. Legend<\/strong><\/p>\n You can show the legend with showLegend<\/a> property, which is true by default. The legendTitle property sets the title of the legend, which we set to an epty string. The labels for each series are taken from the series’ title property:<\/p>\n We can customize the background and border of the legend through properties of the theme or the LegendRenderer<\/a>:<\/p>\n VII. ToolTips<\/strong><\/p>\n The tooltips are automatically rendered when the user hovers over a data point. We make the data points visible by setting showScatter<\/a> to true:<\/p>\n Then we set different properties of the TooltTip class to achieve the desired look of the tooltips:<\/p>\n The ToolTip<\/a> class is a static class and we can set the properties directly.<\/p>\n At the end, we should always call draw() to see the chart correctly rendered on the screen:<\/p>\n You can download the sample with the JavaScript chart libraries and the Intellisense file from this link:<\/p>\n https:\/\/mindfusion.dev\/samples\/javascript\/chart\/JsLineChartTooltips.zip<\/a><\/p>\n About Charting for JavaScript:<\/i> MindFusion library for interactive charts and gauges. It supports all common chart types including 3D bar charts. Charts can have a grid, a legend, unlimitd number of axes and series. Scroll, zoom and pan are supported out of the box. You can easily create your own chart series by implementing the Series interface. In this blog post we will build a line chart with 4 different series and custom labels on both axes. The chart renders tooltips with custom formatting. You can see the chart online here: I. Initial Setup We start by … Continue reading <canvas<\/span> id<\/span>=\"chart<\/a>\" style<\/span>=\"width: 100%; height: 100%; display: block;<\/a>\"><\/pre>\n<script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"Scripts\/MindFusion.Common.js<\/a>\"><\/script<\/span>>\n<\/span><script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"Scripts\/MindFusion.Charting.js<\/a>\"><\/script<\/span>><\/pre>\n<script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"LineChartTooltips.js<\/a>\"><\/pre>\n\/\/\/ <reference<\/span> path<\/span>=\"Scripts\/jspack-vsdoc.js<\/a>\"><\/reference<\/span>><\/pre>\nvar Controls = Charting.Controls;\nvar Collections = Charting.Collections;\nvar DateTimeSeries = Charting.DateTimeSeries;\nvar Drawing = Charting.Drawing;\nvar ToolTip = Charting.ToolTip;\n<\/pre>\n
var chartEl = document.getElementById('chart');\nchartEl.width = chartEl.offsetParent.clientWidth;\nchartEl.height = chartEl.offsetParent.clientHeight;\n<\/pre>\n\/\/ create the chart\nvar lineChart = new Controls.LineChart(chartEl);\nlineChart.title = \"Women as a percentage in all S&E occupations\";\nlineChart.subtitle = \"1993-2010\";\n<\/pre>\n
var xlabels = new Collections.List([\n \"1993\", \"1995\", \"1997\", \"1999\", \"2003\", \"2006\",\n \"2008\", \"2010\"]);\n\nvar ylabels = new Collections.List([\n \"0%\", \"10%\", \"20%\", \"30%\", \"40%\", \"50%\",\n \"60%\", \"70%\"]);\n<\/pre>\n
SeriesWithAxisLabels = function (xValues, yValues, xLabels, yLabels) {\n this.yLabels = yLabels;\n Charting.Series2D.apply(this, [xValues, yValues, xLabels]);\n};\n\nSeriesWithAxisLabels.prototype = Object.create(Charting.Series2D.prototype);\n<\/pre>\nSeriesWithAxisLabels.prototype.getLabel = function (index, kind) {\n if ((kind & Charting.LabelKinds.XAxisLabel) != 0 && this.labels)\n return this.labels.items()[index];\n\n if ((kind & Charting.LabelKinds.YAxisLabel) != 0 && this.yLabels)\n return this.yLabels.items()[index];\n \n return \"\";\n};\n<\/pre>\nvar series0 = new SeriesWithAxisLabels(\n new Collections.List([1, 2, 3, 4, 5, 6, 7, 8]),\n new Collections.List([0, 10, 20, 30, 40, 50, 60, 70]),\n xlabels, ylabels\n);\nseries0.supportedLabels = Charting.LabelKinds.XAxisLabel | Charting.LabelKinds.YAxisLabel;\nlineChart.series.add(series0);\n<\/pre>\n
SeriesWithToolTip = function (xValues, yValues, labels) { \n Charting.Series2D.apply(this, [xValues, yValues, labels]);\n};\n\nSeriesWithToolTip.prototype = Object.create(Charting.Series2D.prototype);\n<\/pre>\nSeriesWithToolTip.prototype.getLabel = function (index, kind) {\n if ((kind & Charting.LabelKinds.ToolTip) != 0 && this.labels)\n return this.labels.items()[index]; \n\n return Charting.Series2D.prototype.getLabel.apply(this, [index, kind]);\n};\n<\/pre>\n\/\/first series\nvar series1 = new SeriesWithToolTip(\n new Collections.List([1, 2, 3, 4, 5, 6, 7, 8]),\n new Collections.List([21.3, 21.5, 21.7, 23, 26.3, 26.1, 26.3, 27.5])\n);\n\nseries1.title = \"All S&E occupations\";\nvar tooltips = new Collections.List();\n\nfor (let step = 0; step < series1.yData.count(); step++) {\n tooltips.add(series1.title + \" for \" + xlabels.items()[step] + \": \" +\n series1.yData.items()[step] + \"%\");\n}\nseries1.labels = tooltips;\nseries1.supportedLabels = Charting.LabelKinds.ToolTip;\nlineChart.series.add(series1);\n<\/pre>\n\/\/ create line brushes\nvar firstBrush = new Drawing.Brush(\"transparent\");\nvar secondBrush = new Drawing.Brush(\"#EA3F36\");\nvar thirdBrush = new Drawing.Brush(\"#1A3D95\"); \nvar fourthBrush = new Drawing.Brush(\"#717173\");\nvar fifthBrush = new Drawing.Brush(\"#407D39\");\n\nvar style = new Charting.PerSeriesStyle();\nstyle.fills = style.strokes = new Collections.List([firstBrush, secondBrush, thirdBrush, fourthBrush, fifthBrush]);\nstyle.strokeDashStyles = new Collections.List([Drawing.DashStyle.Dash, Drawing.DashStyle.Dash,\nDrawing.DashStyle.Dash, Drawing.DashStyle.Dash, Drawing.DashStyle.Dash]);\nstyle.strokeThicknesses = new Collections.List([2, 2, 2, 2, 2]);\nlineChart.plot.seriesStyle = style;\n<\/pre>\n
lineChart.legendTitle = \"\";\nlineChart.gridType = Charting.GridType.Horizontal;\nlineChart.theme.axisTitleFontSize = 14;\nlineChart.theme.axisLabelsFontSize = 12;\nlineChart.theme.subtitleFontStyle = Charting.Drawing.FontStyle.Bold;\nlineChart.theme.titleFontStyle = Charting.Drawing.FontStyle.Bold;\nlineChart.theme.subtitleFontSize = 16;\nlineChart.theme.dataLabelsFontSize = 12;\n<\/pre>\n
lineChart.legendTitle = \"\";\n\nseries1.title = \"All S&E occupations\";\n.................\nseries2.title = \"Computer\/mathematical scientists\";\n..................\nseries3.title = \"Engineers\";\n<\/pre>\n
lineChart.legendRenderer.background = new Drawing.Brush(\"#f2f2f2\");\nlineChart.legendRenderer.borderStroke = new Drawing.Brush(\"#c0c0c0\");\n<\/pre>\n
lineChart.showScatter = true;\n<\/pre>\n
ToolTip.brush = new Drawing.Brush(\"#fafafa\");\nToolTip.pen = new Drawing.Pen(\"#9caac6\");\nToolTip.textBrush = new Drawing.Brush(\"#717173\");\nToolTip.horizontalPadding = 6;\nToolTip.verticalPadding = 4;\nToolTip.horizontalOffset = -6;\nToolTip.verticalOffset = -4;\nToolTip.font = new Charting.Drawing.Font(\"Arial\", 12, Charting.Drawing.FontStyle.Bold);\n<\/pre>\n
lineChart.draw();\n<\/pre>\n
\nThe gauges library is part of Charting for JavaScript. It supports oval and linear gauge with several types of labels and ticks. Various samples show you how the implement the gauges to create and customize all popular gauge types: car dashboard, clock, thermometer, compass etc. Learn more about Charting and Gauges for JavaScript at https:\/\/mindfusion.dev\/javascript-chart.html<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"