Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/RubenDarioGuerreroNeira/Ecosistema-IA-Colombia/llms.txt

Use this file to discover all available pages before exploring further.

ChartService converts Chart.js configuration objects into QuickChart image URLs. Because QuickChart renders charts server-side and returns PNG images at a stable URL, charts are delivered as Telegram photo messages (ctx.replyWithPhoto(url)) — no local rendering or image storage required. Every chart variant accepts typed parameters and returns a fully-formed URL that Telegram can fetch and embed inline.

​
Class: ChartService

ChartService is a plain NestJS @Injectable() service with no constructor dependencies. All state is encoded in the URL it generates. 
import { Injectable } from '@nestjs/common';

@Injectable()
export class ChartService { ... }

​
Method: generateChartUrl

The core URL builder. Serializes any Chart.js config to JSON, URL-encodes it, and appends it to the QuickChart base endpoint alongside width, height, and format parameters. 
generateChartUrl(
  config: any,
  options: { width?: number; height?: number; format?: string } = {},
): string {
  const { width = 500, height = 300, format = 'png' } = options;
  const baseUrl = 'https://quickchart.io/chart';
  const chartParam = encodeURIComponent(JSON.stringify(config));
  return `${baseUrl}?w=${width}&h=${height}&f=${format}&c=${chartParam}`;
}
​
config
any
required
A Chart.js v2/v3 configuration object. Must include at minimum type, data.labels, and data.datasets.
​
options.width
number
Image width in pixels. Defaults to 500.
​
options.height
number
Image height in pixels. Defaults to 300.
​
options.format
string
Output format. Defaults to 'png'. QuickChart also supports 'svg' and 'pdf'.
​
string
string
A fully-encoded URL such as https://quickchart.io/chart?w=500&h=300&f=png&c=%7B%22type%22%3A%22bar%22%2C...%7D.

​
Method: generateBarChart

Produces a vertical bar chart with bold data labels above each bar. 
generateBarChart(labels: string[], data: number[], title: string): string {
  const config = {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [
        {
          label: title,
          data: data,
          backgroundColor: 'rgba(54, 162, 235, 0.5)',
          borderColor: 'rgb(54, 162, 235)',
          borderWidth: 1,
        },
      ],
    },
    options: {
      title: {
        display: true,
        text: title,
        fontSize: 20,
      },
      legend: {
        display: false,
      },
      plugins: {
        datalabels: {
          anchor: 'end',
          align: 'top',
          color: '#000',
          offset: 4,
          font: {
            weight: 'bold',
            size: 14,
          },
        },
      },
    },
  };
  return this.generateChartUrl(config);
}
Styling defaults:
  • Fill: rgba(54, 162, 235, 0.5) (semi-transparent blue)
  • Border: rgb(54, 162, 235)
  • Data labels: bold, 14 px, black, anchored to bar tops
  • Legend: hidden (title already describes the data)
  • Output: 500 × 300 px PNG

​
Method: generatePieChart

Produces a doughnut chart with percentage labels rendered inside each segment. 
generatePieChart(labels: string[], data: number[], title: string): string
Color palette: #FF6384, #36A2EB, #FFCE56, #4BC0C0, #9966FF, #FF9F40 — cycles for up to 6 segments; longer arrays reuse the first colors. Data label formula: 
formatter: (value, ctx) => {
  let sum = ctx.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
  return ((value * 100) / sum).toFixed(1) + '%';
}

​
Method: generateHorizontalBarChart

Best for datasets with many categories (e.g. vaccination coverage by department). Renders an 18-color horizontal bar chart at 600 × 350 px with percentage suffixes on data labels. 
generateHorizontalBarChart(labels: string[], data: number[], title: string): string
Calls generateChartUrl(config, { width: 600, height: 350 }) explicitly to accommodate longer label text on the y-axis.

​
Method: generateLineChart

Produces a smooth line chart for time-series data (e.g. disease trends). 
generateLineChart(labels: string[], data: number[], title: string): string
Styling defaults:
  • Line color: rgb(75, 192, 192) (teal)
  • Fill: disabled
  • Tension: 0.1 (slight curve)
  • Output: 500 × 300 px PNG

​
Sending Charts in Telegram

Charts are delivered as photo messages by calling ctx.replyWithPhoto(url) in BotUpdate: 
// Example from BotUpdate (simplified)
const chartUrl = chartService.generateBarChart(labels, data, title);
await ctx.replyWithPhoto(chartUrl);
Telegram fetches the image from QuickChart’s CDN, caches it, and embeds it inline in the conversation — no intermediate file download or storage required.

​
Chart Types by Feature

Chart TypeFeatureExample query
BarAir quality indicators"Graficar calidad del aire en Medellín"
BarSIVIGILA event totals"Graficar eventos de salud pública"
LineDisease case trend"Ver tendencia de tuberculosis"
Pie / DoughnutGender distribution"Graficar sexo en casos de dengue"
Horizontal BarVaccination coverage"Graficar cobertura de vacunas en Antioquia"
BarMental health diagnoses"Graficar diagnósticos de salud mental"
BarCali services by category"Muéstrame un gráfico de los servicios en Cali"

​
Full URL Example

For a bar chart titled “Top Eventos de Salud” with two data points: 
const url = chartService.generateBarChart(
  ['DENGUE', 'VARICELA INDIVIDUAL'],
  [45321, 12034],
  'Top Eventos de Salud',
);
// → https://quickchart.io/chart?w=500&h=300&f=png&c=%7B%22type%22%3A%22bar%22%2C%22data%22...
QuickChart URLs can exceed 2 000 characters for large datasets. For very long label arrays, consider truncating labels to 20 characters or reducing the number of data points before passing them to generateBarChart.
getStatsByCategory() in CaliHealthService already returns {labels, data} in the exact shape expected by generateBarChart — pass those two arrays directly to generate a Cali service distribution chart.

Build docs developers (and LLMs) love

Get started for freeTalk to us