Markdown

The Markdown component is a simple way to display formatted text in your dashboard. It is useful to display information about the data or the visualizations in your application using the Markdown syntax.

Example

const mdContent = `# Header 1
## Header 2
### Header 3

**Bold text** and *italic text* and ***bold italic text***

- Bullet 1
  - Sub-bullet 1

1. Numbered list item 1
2. Numbered list item 2

> Blockquote

\`Inline code\`

\`\`\`js
// Code block with syntax highlighting
function hello() {
  return "Hello, World!";
}
\`\`\`
`;
let aktive = cf.create();
let myChart = aktive.graph("Markdown")
    .set("content", mdContent)
    .element("my-md-chart")
    .execute();

This will render the following Markdown content:

Settings

The Markdown component has the following settings:

• content: The Markdown content to display. It must be a string using the Markdown syntax.
• editor: A boolean value that indicates if the Markdown component is in editor mode. When set to true, the user can edit the content by double-clicking on the component. The default value is true.

Api Methods

The Markdown component exposes an API that you can use for additional functionality.

// First obtain the markdown component and then access its API
let myMarkdownWidget = cf.getVisualization({elementId});
let api = myMarkdownWidget.get('api');

updateContent(content)

Replaces the content of the Markdown chart with the new content. This triggers the text-change event.

addContent(content)

Adds the new content in addition to the existing content of the Markdown component. This triggers the text-change event.

turnToEditor()

Turns the Markdown component into an editor, allowing the user to edit the content. This triggers the text:editor event.

turnToMarkdown()

Turns the Markdown component into a Markdown viewer, displaying the content in Markdown format. This triggers the text:editor event.

disableEditor()

Disables the editor mode of the Markdown component. This means the user cannot edit the content using the double-click event to turn the component into an editor.

enableEditor()

Enables the editor mode of the Markdown component. This means the user can edit the content using the double-click event to turn the component into an editor.